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

const meta = {
    title: 'Components/Chip',
    component: Chip,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component:
                    'Compact badge/chip component with solid or outlined style. `tone` accepts a Tailwind color token (for example `cyan-700`) and resolves it to the correct border/background/text color at runtime.',
            },
        },
    },
    argTypes: {
        variant: {
            description: 'Chip visual style.',
            options: ['solid', 'outlined'],
            control: 'inline-radio',
            table: { type: { summary: "'solid' | 'outlined'" } },
        },
        tone: {
            description:
                'Tailwind color token (format: `<color>-<shade>`, for example `cyan-700`, `indigo-600`, `rose-500`).',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        as: {
            description:
                "Root tag or component to render (for example `'span'`, `'a'`, `'button'`).",
            control: false,
            table: { type: { summary: 'ElementType' } },
        },
        className: {
            description: 'Extra CSS classes for the root element.',
            control: 'text',
            table: { type: { summary: 'string' } },
        },
        children: {
            description: 'Text or React node rendered inside the chip.',
            control: 'text',
            table: { type: { summary: 'ReactNode' } },
        },
    },
    args: {
        children: 'Published',
        variant: 'solid',
    },
} satisfies Meta<typeof Chip>;

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

export const SolidDefault: Story = {};

export const OutlinedIndigo: Story = {
    args: {
        variant: 'outlined',
        tone: 'indigo-700',
        children: 'Draft',
    },
};

export const OutlinedCyan: Story = {
    args: {
        variant: 'outlined',
        tone: 'cyan-700',
        children: 'Archived',
    },
};

export const ToneMatrix: Story = {
    render: () => (
        <div className="flex flex-wrap items-center gap-2">
            <Chip variant="solid">Default</Chip>
            <Chip variant="solid" tone="indigo-700">
                Indigo
            </Chip>
            <Chip variant="solid" tone="cyan-700">
                Cyan
            </Chip>
            <Chip variant="solid" tone="rose-600">
                Rose
            </Chip>
            <Chip variant="outlined">Default</Chip>
            <Chip variant="outlined" tone="indigo-700">
                Indigo
            </Chip>
            <Chip variant="outlined" tone="cyan-700">
                Cyan
            </Chip>
            <Chip variant="outlined" tone="rose-600">
                Rose
            </Chip>
        </div>
    ),
};