import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import { MagnifyingGlass } from '@phosphor-icons/react';
import { TextField, TextArea, SearchField } from '../components/ui';

const meta = {
  title: 'Inputs/TextField',
  component: TextField,
  parameters: {
    docs: {
      description: {
        component:
          'Sunken text input. `TextField`, `TextArea`, and `SearchField` (icon + input) share the `modern-sk-field` look and forward all native props.',
      },
    },
  },
  argTypes: {
    placeholder: { control: 'text' },
    value: { control: 'text' },
    defaultValue: { control: 'text' },
    disabled: { control: 'boolean' },
    readOnly: { control: 'boolean' },
    required: { control: 'boolean' },
    type: { control: 'text' },
    onChange: { action: 'changed' },
  },
  args: { placeholder: 'Type here…' },
} satisfies Meta<typeof TextField>;

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

export const Playground: Story = {};

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

export const Multiline: Story = {
  render: () => <TextArea rows={4} placeholder="Multiple lines…" style={{ width: 320 }} />,
};

export const Search: Story = {
  render: () => (
    <SearchField
      icon={<MagnifyingGlass size={16} />}
      placeholder="Search…"
      style={{ width: 280 }}
    />
  ),
};