import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import { Input } from './Input';

const meta = {
  title: 'Atoms/Input',
  component: Input,
  parameters: { layout: 'centered' },
  args: {
    label: 'Nombre del lote',
    placeholder: 'Ej. Sector A',
  },
} satisfies Meta<typeof Input>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  render: (args) => {
    const [value, setValue] = useState('');
    return <Input {...args} value={value} onChangeText={setValue} />;
  },
};

export const WithHelper: Story = {
  ...Default,
  args: { ...meta.args, helperText: 'Hasta 64 caracteres.' },
};

export const Error: Story = {
  ...Default,
  args: { ...meta.args, error: true, helperText: 'Este campo es obligatorio.' },
};