import { BadgeContainer } from './BadgeContainer';
import { Icon } from '../Icon/Icon';

export default {
  title: 'Atoms/BadgeContainer',
  component: BadgeContainer,
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'number', description: 'Tamaño cuadrado del contenedor (px)' },
    borderRadius: { control: 'number', description: 'Radio de borde (px)' },
    paddingX: { control: 'number', description: 'Padding horizontal (px)' },
    backgroundColor: { control: 'color', description: 'Color de fondo' },
  },
};

export const Default = {
  args: {
    size: 48,
    borderRadius: 10,
    paddingX: 10,
    backgroundColor: 'var(--color-cyan-82, #B8E2E9)',
    children: <Icon name="BuildingOfficeIcon" variant="24-outline" size={24} style={{ color: '#29474C' }} />,
  },
};

export const Small = {
  args: {
    size: 40,
    borderRadius: 10,
    paddingX: 8,
    backgroundColor: 'var(--color-cyan-82, #B8E2E9)',
    children: <Icon name="BuildingOfficeIcon" variant="24-outline" size={20} style={{ color: '#29474C' }} />,
  },
};

