import type { Meta, StoryObj } from '@storybook/react-vite';

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

const meta = {
  title: 'Components/Tabs',
  component: Tabs,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Switches between sibling panels without leaving the page. Tabs are for alternate views of the same subject — if the panels are separate destinations, use links and routes so they can be shared and bookmarked.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Tabs>;

export default meta;
type Story = StoryObj<typeof meta>;

const panels = {
  overview: 'Traffic, conversion and revenue for the last 30 days.',
  activity: 'Everything that happened in this project recently.',
  settings: 'Project name, visibility and danger zone.',
};

export const Default: Story = {
  render: () => (
    <Tabs defaultValue="overview" className="w-96">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      {Object.entries(panels).map(([value, text]) => (
        <TabsContent key={value} value={value} className="pt-3 text-sm text-muted-foreground">
          {text}
        </TabsContent>
      ))}
    </Tabs>
  ),
};

/** The `line` variant reads better when the tab strip spans a full-width area. */
export const LineVariant: Story = {
  render: () => (
    <Tabs defaultValue="overview" className="w-96">
      <TabsList variant="line">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      {Object.entries(panels).map(([value, text]) => (
        <TabsContent key={value} value={value} className="pt-4 text-sm text-muted-foreground">
          {text}
        </TabsContent>
      ))}
    </Tabs>
  ),
};

export const Vertical: Story = {
  render: () => (
    <Tabs defaultValue="overview" orientation="vertical" className="w-96">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      {Object.entries(panels).map(([value, text]) => (
        <TabsContent key={value} value={value} className="pl-4 text-sm text-muted-foreground">
          {text}
        </TabsContent>
      ))}
    </Tabs>
  ),
};

export const WithDisabledTab: Story = {
  render: () => (
    <Tabs defaultValue="overview" className="w-96">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="billing" disabled>
          Billing
        </TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="pt-3 text-sm text-muted-foreground">
        Billing is only available on paid plans.
      </TabsContent>
    </Tabs>
  ),
};