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

const meta: Meta<typeof Input> = {
  title: 'UI/Input',
  component: Input,
  parameters: { layout: 'centered' },
  tags: ['autodocs'],
  decorators: [
    (Story) => (
      <div style={{ width: 320 }}>
        <Story />
      </div>
    ),
  ],
};
export default meta;
type Story = StoryObj<typeof Input>;

export const Default: Story = {
  args: { label: 'Label', placeholder: 'Placeholder' },
};
export const WithHint: Story = {
  args: {
    label: 'Environment name',
    placeholder: 'e.g. staging',
    hint: 'Used to identify this environment in scenarios.',
  },
};
export const WithError: Story = {
  args: {
    label: 'URL',
    placeholder: 'https://...',
    defaultValue: 'not a url',
    error: 'Must be a valid URL.',
  },
};
export const Disabled: Story = {
  args: { label: 'Label', value: 'Some value', disabled: true, readOnly: true },
};