import { useState } from 'react';

import { Stack } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { IconBook, IconCalendar, IconFilter } from '@tabler/icons-react';

import Category from '.';

const meta: Meta<typeof Category> = {
  component: Category,
  title: 'Composed Components/Category',
  tags: ['autodocs'],
  args: {
    label: 'Category',
    Icon: IconFilter,
    selected: false,
    onClick: () => alert('Category clicked'),
  },
};

export default meta;

type Story = StoryObj<typeof Category>;

export const Default: Story = {
  args: {},
};

const StatefulCategory = () => {
  const [selected, setSelected] = useState(0);
  return (
    <Stack sx={{ gap: 1 }}>
      <Category
        label="Category 0"
        Icon={IconFilter}
        selected={selected === 0}
        onClick={() => setSelected(0)}
      />
      <Category
        label="Category 1"
        Icon={IconBook}
        selected={selected === 1}
        onClick={() => setSelected(1)}
      />
      <Category
        label="Category 2"
        Icon={IconCalendar}
        selected={selected === 2}
        onClick={() => setSelected(2)}
      />
    </Stack>
  );
};

export const Stateful: Story = {
  render: () => <StatefulCategory />,
};