import { Button } from "../components/Button";
import {
  TabContent,
  TabList,
  TabProvider,
  TabTrigger,
} from "../components/Tabs";

export default {
  title: "React/Tabs",
  decorators: [
    (Story: any) => <TabProvider defaultName="tab1">{Story()}</TabProvider>,
  ],
  parameters: {
    layout: "centered",
  },
};

export const Default = () => {
  return (
    <>
      <div className="flex flex-col gap-4 w-[500px]">
        <TabList>
          <TabTrigger name="tab1">Tab 1</TabTrigger>
          <TabTrigger name="tab2">Tab 2</TabTrigger>
        </TabList>
        <TabContent name="tab1">
          <div className="rounded-md bg-neutral-700 p-4">Tab 1 Content</div>
        </TabContent>
        <TabContent name="tab2">
          <div className="rounded-md bg-neutral-700 p-4">Tab 2 Content</div>
        </TabContent>
      </div>
    </>
  );
};

export const AsChild = () => {
  return (
    <>
      <div className="flex flex-col gap-4 w-[500px]">
        <TabList>
          <TabTrigger name="tab1" asChild>
            <Button preset="ghost" className="justify-center">
              Tab 1
            </Button>
          </TabTrigger>
          <TabTrigger name="tab2" asChild>
            <Button preset="ghost" className="justify-center">
              Tab 2
            </Button>
          </TabTrigger>
        </TabList>
        <TabContent name="tab1">
          <div className="rounded-md bg-neutral-700 p-4">Tab 1 Content</div>
        </TabContent>
        <TabContent name="tab2">
          <div className="rounded-md bg-neutral-700 p-4">Tab 2 Content</div>
        </TabContent>
      </div>
    </>
  );
};