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

import { Textarea } from './textarea';

const meta = {
  title: 'Components/Textarea',
  component: Textarea,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Multi-line text field. Grows with its content through `field-sizing-content`, so no auto-resize JavaScript is needed.',
      },
    },
  },
  tags: ['autodocs'],
  args: { placeholder: 'Tell us what happened…' },
  decorators: [(Story) => <div className="w-80"><Story /></div>],
} satisfies Meta<typeof Textarea>;

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

export const Default: Story = {};

export const GrowsWithContent: Story = {
  args: {
    defaultValue:
      'Type into this field and watch it grow.\nIt keeps expanding as long as there are more lines.',
  },
};

export const Invalid: Story = {
  args: { 'aria-invalid': true, defaultValue: 'Too short' },
};

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