Textarea

import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

/**
 * Live Textarea example — the one baseline size (vertical-only resize) and the
 * documented states, wired exactly as Input's shared form-field model: Label
 * bound with `htmlFor` / `id`, `--scale-2` (gap-2) to the control, `--scale-1-5`
 * (gap-1.5) to a supporting message. Helper is `--muted-foreground`; an error
 * message is `--foreground` with `aria-invalid="true"` + `aria-describedby`.
 */
export function TextareaShowcase() {
  return (
    <div className="flex max-w-md flex-col gap-8">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Default + helper text
        </h3>
        <div className="flex flex-col gap-2">
          <Label htmlFor="textarea-default">Message</Label>
          <Textarea
            id="textarea-default"
            aria-describedby="textarea-default-help"
            placeholder="Tell us what happened…"
          />
          <p
            id="textarea-default-help"
            className="text-xs leading-snug text-muted-foreground"
          >
            Drag the bottom-right corner to make more room.
          </p>
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Error
        </h3>
        <div className="flex flex-col gap-2">
          <Label htmlFor="textarea-error">Description</Label>
          <Textarea
            id="textarea-error"
            aria-invalid="true"
            aria-describedby="textarea-error-text"
            defaultValue="Too short"
          />
          <p
            id="textarea-error-text"
            className="text-xs leading-snug text-foreground"
          >
            Add at least 20 characters.
          </p>
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Read-only
        </h3>
        <div className="flex flex-col gap-2">
          <Label htmlFor="textarea-readonly">Original request</Label>
          <Textarea
            id="textarea-readonly"
            readOnly
            defaultValue={
              "Submitted 3 days ago.\nThe export finished but the download link expired."
            }
          />
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Disabled
        </h3>
        <div className="flex flex-col gap-2">
          <Label htmlFor="textarea-disabled" className="opacity-50">
            Internal note
          </Label>
          <Textarea
            id="textarea-disabled"
            disabled
            defaultValue="Editing is turned off for this record."
          />
        </div>
      </section>
    </div>
  );
}