import { PrimaryInput } from './PrimaryInput';

export default {
  title: 'Inputs/PrimaryInput',
  component: PrimaryInput,
  tags: ['autodocs'],
  argTypes: {
    label: {
      control: 'text',
      description: 'Etiqueta opcional encima del input',
    },
    placeholder: {
      control: 'text',
      description: 'Placeholder del input',
    },
    type: {
      control: 'select',
      options: ['text', 'email', 'password', 'number', 'tel', 'url'],
      description: 'Tipo del input',
    },
    value: {
      control: 'text',
      description: 'Valor (controlado junto con onChange)',
    },
    disabled: {
      control: 'boolean',
      description: 'Input deshabilitado',
    },
    error: {
      control: 'text',
      description: 'Mensaje de error debajo del input (borde rojo)',
    },
    required: {
      control: 'boolean',
      description: 'Muestra asterisco rojo en el label',
    },
    onChange: {
      action: 'change',
      description: 'Callback al cambiar el valor',
    },
  },
};

export const Default = {
  args: {
    placeholder: 'Ingrese el nombre',
    onChange: (e) => console.log(e.target.value),
  },
};

export const ConLabel = {
  args: {
    label: 'Nombre comercial',
    placeholder: 'Ingrese el nombre',
    onChange: (e) => console.log(e.target.value),
  },
};

export const ConError = {
  args: {
    label: 'Email',
    type: 'email',
    placeholder: 'correo@ejemplo.com',
    value: 'invalido',
    error: 'Ingrese un correo válido',
    onChange: (e) => console.log(e.target.value),
  },
};

export const Required = {
  args: {
    label: 'Campo obligatorio',
    placeholder: 'Este campo es requerido',
    required: true,
    onChange: (e) => console.log(e.target.value),
  },
};

export const Disabled = {
  args: {
    label: 'Deshabilitado',
    placeholder: 'No editable',
    value: 'Texto fijo',
    disabled: true,
  },
};

export const Password = {
  args: {
    label: 'Contraseña',
    type: 'password',
    placeholder: 'Ingrese su contraseña',
    onChange: (e) => console.log(e.target.value),
  },
};
