import type { Meta, StoryObj } from '@storybook/react';
import { Badge } from './badge';
import { Star } from 'lucide-react';

const meta = {
    title: 'UI/Badge',
    component: Badge,
    tags: ['autodocs'],
    argTypes: {
        variant: {
            control: 'select',
            options: ['cyan', 'magenta', 'lime', 'gold', 'terminal'],
        },
        size: {
            control: 'select',
            options: ['sm', 'md', 'lg'],
        },
        dot: { control: 'boolean' },
        count: { control: 'number' },
        label: { control: 'text' },
    },
    args: {
        label: 'Badge',
        variant: 'cyan',
        size: 'md',
    }
} satisfies Meta<typeof Badge>;

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

export const Default: Story = {};

export const Variants = {
    render: () => (
        <div className="flex gap-2">
            <Badge variant="cyan" label="Cyan" />
            <Badge variant="magenta" label="Magenta" />
            <Badge variant="lime" label="Lime" />
            <Badge variant="gold" label="Gold" />
            <Badge variant="terminal" label="Terminal" />
        </div>
    ),
};

export const WithIcon: Story = {
    args: {
        icon: <Star className="w-3 h-3" />,
        label: 'Premium',
        variant: 'gold',
    },
};

export const WithCount: Story = {
    args: {
        label: 'Notifications',
        count: 5,
        variant: 'magenta',
    },
};