import { BadgeInformativo } from './BadgeInformativo';

export default {
  title: 'Atoms/BadgeInformativo',
  component: BadgeInformativo,
  tags: ['autodocs'],
  argTypes: {
    text: {
      control: 'text',
      description: 'Texto que muestra el badge',
    },
    type: {
      control: 'select',
      options: ['info', 'error', 'success'],
      description: 'Tipo: info (azul), error (rojo), success (verde)',
    },
  },
};

export const Info = {
  args: {
    text: 'Información',
    type: 'info',
  },
  decorators: [
    (Story) => (
      <div style={{ width: '200px' }}>
        <Story />
      </div>
    ),
  ],
};

export const Error = {
  args: {
    text: 'Error',
    type: 'error',
  },
  decorators: [
    (Story) => (
      <div style={{ width: '120px' }}>
        <Story />
      </div>
    ),
  ],
};

export const Success = {
  args: {
    text: 'Éxito',
    type: 'success',
  },
  decorators: [
    (Story) => (
      <div style={{ width: '100%', maxWidth: '300px' }}>
        <Story />
      </div>
    ),
  ],
};

export const AnchoContenedor = {
  args: {
    text: 'Badge al 100% del contenedor',
    type: 'success',
  },
  decorators: [
    (Story) => (
      <div style={{ width: '100%', padding: '16px' }}>
        <Story />
      </div>
    ),
  ],
};
