import { BadgeAzul } from './BadgeAzul';

export default {
  title: 'Atoms/Badge/BadgeAzul',
  component: BadgeAzul,
  tags: ['autodocs'],
  argTypes: {
    children: { control: 'text', description: 'Texto libre del badge' },
    count: { control: 'number', description: 'Número para armar «{count} {suffix}»' },
    suffix: { control: 'text', description: 'Sufijo tras el número' },
    label: { control: 'text', description: 'Texto alternativo sin count' },
  },
};

export const Default = {
  args: {
    children: '4 documentos',
  },
};

export const ConCount = {
  name: 'Con count + suffix',
  args: {
    count: 4,
    suffix: 'documentos',
  },
};

export const TareasCompletadas = {
  name: 'Tareas completadas',
  args: {
    children: '2 tareas completadas',
  },
};

export const Variantes = {
  name: 'Ejemplos',
  render: () => (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, padding: 16 }}>
      <BadgeAzul count={4} />
      <BadgeAzul>2 tareas completadas</BadgeAzul>
      <BadgeAzul label="12 registros" />
    </div>
  ),
};
