import { PrimaryActionButton } from './PrimaryActionButton';

export default {
  title: 'Atoms/PrimaryActionButton',
  component: PrimaryActionButton,
  tags: ['autodocs'],
  argTypes: {
    text: {
      control: 'text',
      description: 'Texto del botón (ej. Guardar, Aceptar, Descartar)',
    },
    variant: {
      control: 'select',
      options: ['primary', 'outline'],
      description: 'primary = relleno (Guardar), outline = borde (Descartar)',
    },
    disabled: {
      control: 'boolean',
      description: 'Estado deshabilitado (gris, sin click)',
    },
    fullWidth: {
      control: 'boolean',
      description: 'true = ancho 100% (vista narrow), false = ancho según contenido',
    },
    onClick: {
      action: 'clicked',
      description: 'Función al hacer click (solo si no está disabled)',
    },
  },
};

export const Default = {
  args: {
    text: 'Guardar',
    disabled: false,
    fullWidth: false,
    onClick: () => alert('Guardar'),
  },
};

export const FullWidth = {
  args: {
    text: 'Guardar',
    disabled: false,
    fullWidth: true,
    onClick: () => alert('Guardar'),
  },
  parameters: {
    layout: 'padded',
  },
  decorators: [
    (Story) => (
      <div style={{ maxWidth: 400 }}>
        <Story />
      </div>
    ),
  ],
};

export const Disabled = {
  args: {
    text: 'Guardar',
    disabled: true,
    fullWidth: false,
  },
};

export const Aceptar = {
  args: {
    text: 'Aceptar',
    disabled: false,
    fullWidth: false,
    onClick: () => alert('Aceptar'),
  },
};

export const Descartar = {
  args: {
    text: 'Descartar',
    variant: 'outline',
    disabled: false,
    fullWidth: false,
    onClick: () => alert('Descartar'),
  },
};
