import { Textarea } from '../../lib';
import { DemoPageWithGuide } from '../DemoPageWithGuide';

const TEXTAREA_GUIDE = {
  summary:
    'All Textarea props are optional. Defaults: label "", placeholder "", rows 4, resize "vertical", error false.',
  propsOverview:
    'Optional: label, error, errorMessage, helperText, resize, rows, cols, value, defaultValue, disabled, readOnly, required, minLength, maxLength, onValueChange, onChange, id, name, className, aria-*, and other native textarea attributes.',
  features: ['resize="none" | "both" | "horizontal" | "vertical" controls user resizing'],
  codeLabel: 'Full example (props optional)',
  code: `import { Textarea } from 'ccl-ui-components-react';

<Textarea
  label="Notes"
  placeholder="Notes"
  rows={4}
  resize="vertical"
  error={false}
  errorMessage=""
  helperText=""
  disabled={false}
  readOnly={false}
  required={false}
  defaultValue=""
  onValueChange={(v) => {}}
  onChange={(e) => {}}
  id="notes"
  name="notes"
  className=""
/>`,
} as const;

export default function TextareaPage() {
  return (
    <DemoPageWithGuide guide={TEXTAREA_GUIDE}>
    <main className="demo demo-page">
      <h1>Textarea</h1>
      <p className="demo-lead">Multi-line input with helper and validation styling.</p>
      <section className="demo-section">
        <Textarea label="Notes" placeholder="Notes" rows={4} helperText="Optional" />
        <Textarea label="Required field" required placeholder="Required field" rows={3} error errorMessage="This field is required." />
      </section>
    </main>
    </DemoPageWithGuide>
  );
}