import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import { Tabs, TabsList, TabsContent } from '../components/ui';

const meta = {
  title: 'Navigation/Tabs',
  component: Tabs,
  parameters: {
    docs: {
      description: {
        component:
          'Radix Tabs. `Tabs` is the root, `TabsList` takes `items`, and `TabsContent` matches each `value`.',
      },
    },
  },
  argTypes: {
    defaultValue: { control: 'text' },
    value: { control: 'text' },
    onValueChange: { action: 'value changed' },
    disabled: { control: 'boolean' },
  },
} satisfies Meta<typeof Tabs>;

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

export const Playground: Story = {
  render: () => (
    <Tabs defaultValue="overview" style={{ width: 420 }}>
      <TabsList
        items={[
          { value: 'overview', label: 'Overview' },
          { value: 'activity', label: 'Activity' },
          { value: 'settings', label: 'Settings' },
        ]}
      />
      <TabsContent value="overview" style={{ paddingTop: 16 }} className="modern-sk-body">
        Project at a glance.
      </TabsContent>
      <TabsContent value="activity" style={{ paddingTop: 16 }} className="modern-sk-body">
        Recent activity feed.
      </TabsContent>
      <TabsContent value="settings" style={{ paddingTop: 16 }} className="modern-sk-body">
        Preferences and configuration.
      </TabsContent>
    </Tabs>
  ),
};