import { Badge } from './Badge';
import { BadgeAzul } from '../BadgeAzul/BadgeAzul';

export default {
  title: 'Atoms/Badge',
  component: Badge,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: [
        'default',
        'primary',
        'success',
        'successOutline',
        'error',
        'inactive',
        'pendiente',
        'warning',
        'danger',
      ],
    },
    size: {
      control: 'select',
      options: ['small', 'medium', 'large'],
    },
  },
};

export const Default = {
  args: {
    children: 'Badge',
    variant: 'default',
  },
};

export const Primary = {
  args: {
    children: 'Primary',
    variant: 'primary',
  },
};

export const Success = {
  args: {
    children: 'Success',
    variant: 'success',
  },
};

export const SuccessOutline = {
  args: {
    children: 'Success Outline',
    variant: 'successOutline',
  },
};

export const Error = {
  args: {
    children: 'Error',
    variant: 'error',
  },
};

export const Inactive = {
  args: {
    children: 'Inactivo',
    variant: 'inactive',
  },
};

export const Pendiente = {
  args: {
    children: 'Pendiente',
    variant: 'pendiente',
  },
};

export const Small = {
  args: {
    children: 'Small',
    variant: 'primary',
    size: 'small',
  },
};

export const Large = {
  args: {
    children: 'Large Badge',
    variant: 'primary',
    size: 'large',
  },
};

export const Azul = {
  name: 'Badge azul (contador)',
  render: () => (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
      <BadgeAzul count={4} />
      <BadgeAzul>2 tareas completadas</BadgeAzul>
    </div>
  ),
};

