import type { Meta, StoryObj } from '@storybook/svelte';
import TabBar from './TabBar.svelte';

const meta = {
  title: 'UI/TabBar',
  component: TabBar,
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'Horizontale Tab-Leiste. `tabs`: Array aus `{ id, label }`. `selectedId` / `bind:selectedId` für aktiven Tab.',
      },
    },
  },
  argTypes: {
    selectedId: { control: 'text' },
  },
} satisfies Meta<TabBar>;

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

export const Default: Story = {
  args: {
    tabs: [
      { id: 'tab1', label: 'Tab 1' },
      { id: 'tab2', label: 'Tab 2' },
      { id: 'tab3', label: 'Tab 3' },
    ],
    selectedId: 'tab2',
    labelledBy: 'Inhalte',
  },
};
