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

const QUEUE: ITab[] = [
  { id: 'pending', label: 'На согласовании у меня', count: 1 },
  { id: 'mine', label: 'Инициализированные мной', count: 71 },
  { id: 'approved', label: 'Согласованные мной', count: 4 }
];

const meta: Meta<typeof Tabs> = {
  title: 'Навигация/Tabs',
  component: Tabs,
  tags: ['autodocs']
};

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

// Вкладки-очереди реестра (как в дашборде myDocuments).
export const Queues: Story = {
  render: () => {
    const [active, setActive] = useState<string | number>('pending');
    return <Tabs tabs={QUEUE} activeId={active} onChange={setActive} />;
  }
};

// Вкладки категорий с иконками.
export const WithIcons: Story = {
  render: () => {
    const [active, setActive] = useState<string | number>('rec');
    return (
      <Tabs
        activeId={active}
        onChange={setActive}
        tabs={[
          { id: 'rec', label: 'Отдел рекрутинга', icon: 'people' },
          { id: 'it', label: 'IT', icon: 'monitor' },
          { id: 'buh', label: 'Бухгалтерия', icon: 'calculator' }
        ]}
      />
    );
  }
};