import type { Meta, StoryObj } from "@storybook/react";

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";

const meta = {
  title: "UI/Tabs",
  component: Tabs,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
} satisfies Meta<typeof Tabs>;

export default meta;

type Story = StoryObj<typeof Tabs>;

export const DefaultTabs: Story = {
  render: () => (
    <Tabs defaultValue="1" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="1">Gelen Talepler</TabsTrigger>
        <TabsTrigger value="2">Oluşturduklarım</TabsTrigger>
      </TabsList>
      <TabsContent value="1">
        Your awesome content about Gelen Talepler
      </TabsContent>
      <TabsContent value="2">
        Your awesome content about Oluşturduklarım
      </TabsContent>
    </Tabs>
  ),
};

export const RoomTabs: Story = {
  render: () => (
    <Tabs defaultValue="1" className="w-[400px]">
      <TabsList>
        <TabsTrigger
          className="!h-8 !border !border-r-0 border-gray-300 px-5 !text-gray-500 after:absolute after:left-[10.4%] after:h-8 after:w-[1.4rem] after:border-y  after:border-gray-800 data-[state=active]:!border data-[state=active]:!border-r-0 data-[state=active]:!border-gray-800 data-[state=active]:!text-gray-800 data-[state=active]:after:h-[1.4rem] data-[state=active]:after:rotate-45 data-[state=active]:after:!border-b-0 data-[state=active]:after:border-r data-[state=active]:after:border-t data-[state=active]:after:!border-gray-800 data-[state=active]:after:content-[''] "
          value="1"
        >
          1.Oda
        </TabsTrigger>
        <TabsTrigger
          className="ml-4 !border !border-l-0 border-gray-300 px-5 !text-gray-500 after:absolute after:left-[9.1%] after:h-8 after:w-[1.4rem] after:border-y after:border-gray-800 data-[state=active]:!border data-[state=active]:!border-l-0  data-[state=active]:!border-gray-800 data-[state=active]:!text-gray-800 data-[state=active]:after:h-[1.4rem] data-[state=active]:after:rotate-45 data-[state=active]:after:!border-b-0 data-[state=active]:after:border-r data-[state=active]:after:border-t data-[state=active]:after:!border-gray-800 data-[state=active]:after:content-['']"
          value="2"
        >
          2.Oda
        </TabsTrigger>
      </TabsList>
      <TabsContent value="1">
        Your awesome content about Gelen Talepler
      </TabsContent>
      <TabsContent value="2">
        Your awesome content about Oluşturduklarım
      </TabsContent>
    </Tabs>
  ),
};