import {
  Meta,
  Title,
  Subtitle,
  Canvas,
  Controls,
  Story,
} from '@storybook/addon-docs/blocks'
import * as TextareaStories from './Textarea.stories'
import { LifecycleTag } from '../../docs/components/LifecycleTag'

<Meta of={TextareaStories} />

<Title>Textarea</Title>
<Subtitle>A multi-line text input field.</Subtitle>
<LifecycleTag variant="Stable" />

<Canvas of={TextareaStories.Default} sourceState="shown" />
<Controls />

## Usage

Our `Textarea` component is a wrapper around the native HTML `<textarea>` element. This means it accepts all standard `textarea` attributes (like `placeholder`, `disabled`, `rows`, `name`, etc.) in addition to our custom `size` and `error` props for styling.

```tsx
import { Textarea } from '@chainlink/blocks'

export default function MyComponent() {
  return <Textarea placeholder="Type your message here." rows={5} />
}
```

## Examples

### Small

<Canvas of={TextareaStories.Small} sourceState="shown" />

### Error State

<Canvas of={TextareaStories.Error} sourceState="shown" />

### Disabled

<Canvas of={TextareaStories.Disabled} sourceState="shown" />