import type { Meta, StoryObj } from '@storybook/react'
import { Tag } from './Tag'

const meta: Meta<typeof Tag> = {
  title: 'Blocks/Tag',
  component: Tag,
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'progress', 'success', 'warning', 'urgent', 'muted'],
      description: 'The visual style of the tag.',
    },
    size: {
      control: 'radio',
      options: ['default', 'sm'],
      description: 'The size of the tag.',
    },
    hideIcon: {
      control: 'boolean',
      description: 'Whether to hide the icon.',
    },
    children: {
      control: 'text',
      description: 'The content of the tag.',
    },
  },
}
export default meta

type Story = StoryObj<typeof Tag>

export const Default: Story = {
  args: {
    children: 'Default',
    variant: 'default',
    size: 'default',
    hideIcon: false,
  },
}

export const AllVariants: Story = {
  render: (_args) => (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-4">
        <Tag variant="default">Default</Tag>
        <Tag variant="progress">In Progress</Tag>
        <Tag variant="success">Success</Tag>
        <Tag variant="warning">Warning</Tag>
        <Tag variant="urgent">Urgent</Tag>
        <Tag variant="muted">Muted</Tag>
      </div>
      <div className="flex items-center gap-4">
        <Tag variant="default" size="sm">
          Default
        </Tag>
        <Tag variant="progress" size="sm">
          In Progress
        </Tag>
        <Tag variant="success" size="sm">
          Success
        </Tag>
        <Tag variant="warning" size="sm">
          Warning
        </Tag>
        <Tag variant="urgent" size="sm">
          Urgent
        </Tag>
        <Tag variant="muted" size="sm">
          Muted
        </Tag>
      </div>
    </div>
  ),
}

export const WithoutIcon: Story = {
  args: {
    children: 'No Icon',
    variant: 'default',
    size: 'default',
    hideIcon: true,
  },
}