import { useState } from 'react';
import { TagList } from './TagList';

const sampleTags = ['React', 'JavaScript', 'TypeScript', 'Tailwind CSS', 'Storybook'];

export default {
  title: 'DataDisplay/TagList',
  component: TagList,
  tags: ['autodocs'],
};

export const Default = {
  args: {
    tags: sampleTags,
  },
};

export const WithRemove = {
  render: () => {
    const [tags, setTags] = useState(sampleTags);
    return (
      <TagList
        tags={tags}
        onRemove={(index) => {
          setTags(tags.filter((_, i) => i !== index));
        }}
      />
    );
  },
};

export const WithVariants = {
  args: {
    tags: [
      { label: 'React', variant: 'primary' },
      { label: 'JavaScript', variant: 'success' },
      { label: 'TypeScript', variant: 'warning' },
      { label: 'Tailwind', variant: 'danger' },
    ],
  },
};

export const Empty = {
  args: {
    tags: [],
  },
};

