import { useState } from 'react';
import { Options } from './Options';

const items = [
  { value: 'a', label: 'Opción A' },
  { value: 'b', label: 'Opción B' },
  { value: 'c', label: 'Opción C' },
];

export default {
  title: 'Inputs/Options',
  component: Options,
  tags: ['autodocs'],
  argTypes: {
    items: { control: false, description: 'Array de { value, label } o valores simples' },
    value: { control: 'text', description: 'Valor seleccionado' },
    onChange: { action: 'change' },
    name: { control: 'text' },
    disabled: { control: 'boolean' },
  },
};

export const Default = {
  args: {
    items,
    value: 'b',
    onChange: (v) => console.log('selected', v),
    name: 'demo-options',
  },
};

export const Controlled = () => {
  const [value, setValue] = useState('a');
  return (
    <Options
      items={items}
      value={value}
      onChange={setValue}
      name="controlled"
    />
  );
};

export const ManyItems = {
  args: {
    items: [
      { value: '1', label: 'Uno' },
      { value: '2', label: 'Dos' },
      { value: '3', label: 'Tres' },
      { value: '4', label: 'Cuatro' },
      { value: '5', label: 'Cinco' },
    ],
    value: '3',
    onChange: (v) => console.log('selected', v),
  },
};

export const ConVariantesDeColor = {
  args: {
    items: [
      { value: 'borrador', label: 'Borrador', variant: 'default' },
      { value: 'activa', label: 'Activa', variant: 'success' },
      { value: 'inactiva', label: 'Inactiva', variant: 'neutral' },
      { value: 'suspendida', label: 'Suspendida', variant: 'error' },
    ],
    value: 'activa',
    onChange: (v) => console.log('selected', v),
  },
};

export const ConOpcionesDeshabilitadas = {
  args: {
    items: [
      { value: 'Borrador', label: 'Borrador', variant: 'default' },
      { value: 'Activa', label: 'Activa', variant: 'success', disabled: true },
      { value: 'Inactiva', label: 'Inactiva', variant: 'neutral', disabled: true },
      { value: 'Suspendida', label: 'Suspendida', variant: 'error' },
    ],
    value: 'Borrador',
    onChange: (v) => console.log('selected', v),
  },
};
