import { Story, Canvas, Meta } from "@storybook/blocks";
import { ComponentStatus, COMPONENT_STATUS } from "../../storybook-components";
import { THEME } from "../../types";
import { Textarea } from "../../components/Textarea";

export const decorators = [
  (storyFn) => <div className="p-8 bg-gray-800">{storyFn()}</div>,
];

<Meta
  title="Deprecated/Components/To delete/Textarea (Branded)"
  component={Textarea}
  decorators={decorators}
/>

# Brand Textarea

<ComponentStatus status={COMPONENT_STATUS.DEPRECATED} />

The [`Textarea`](/?path=/docs/components-textarea--textarea) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Textarea` is shown below. If a `Textarea` is within a brand themed [`FormGroup`](http://localhost:9002/?path=/docs/components-aptible-branding-formgroup--form-group), it will automatically use that as its `theme`. To override this, provide a value to the `Textarea`'s `theme` prop.

<Canvas>
  <Story name="Brand Textarea">
    <Textarea theme={THEME.BRAND} />
  </Story>
</Canvas>

## Demos

### Disabled

<Canvas>
  <Story name="Disabled">
    <Textarea theme={THEME.BRAND} value="Disabled" disabled />
  </Story>
</Canvas>

### With Placeholder

<Canvas>
  <Story name="Placeholder">
    <Textarea theme={THEME.BRAND} placeholder="Placeholder Text" />
  </Story>
</Canvas>