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

import { Input } from './input';
import { Label } from '../label/label';

const meta = {
  title: 'Components/Input',
  component: Input,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Single-line text field. The error treatment is driven by `aria-invalid`, so what is shown always matches what assistive technology reports.',
      },
    },
  },
  tags: ['autodocs'],
  args: { placeholder: 'name@example.com' },
  decorators: [(Story) => <div className="w-72"><Story /></div>],
} satisfies Meta<typeof Input>;

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

export const Default: Story = {};

export const WithLabel: Story = {
  render: (args) => (
    <div className="grid gap-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" {...args} />
    </div>
  ),
};

export const Types: Story = {
  render: () => (
    <div className="grid gap-3">
      <Input type="text" placeholder="Text" />
      <Input type="password" placeholder="Password" defaultValue="hunter2" />
      <Input type="number" placeholder="Number" />
      <Input type="date" />
      <Input type="file" />
    </div>
  ),
};

export const Invalid: Story = {
  args: { 'aria-invalid': true, defaultValue: 'not-an-email' },
};

export const Disabled: Story = {
  args: { disabled: true, defaultValue: 'Read only' },
};