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

import { HeartIcon } from '@/icons';

import { Badge } from './Badge';

const meta: Meta<typeof Badge> = {
  title: 'Components/Badge',
  component: Badge,
  tags: ['autodocs'],
  argTypes: {
    text: { control: 'text' },
    icon: { control: 'boolean' },
    className: { control: 'text' },
  },
};

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

export const Default: Story = {
  args: {
    text: 'Default',
    className: 'bg-white/20 text-white/90',
  },
};

export const WithIcon: Story = {
  args: {
    text: 'Most Popular',
    icon: <HeartIcon width={12} height={12} />,
    className: 'bg-rose-500 text-white/90',
  },
};

export const CustomClassName: Story = {
  args: {
    text: 'Custom',
    className: 'bg-indigo-500 text-white shadow-md',
  },
};