// <TextAreaField> — `TextField`'s multi-line sibling, for free text that
// runs past one line (a scheduled prompt's body is the motivating caller).
// Same label chrome and `.ui-form-control` look as the rest of the kit;
// the box only grows vertically, since a horizontal drag would break out
// of whatever column the page gave the field.
import { FormField } from "../form-field/FormField.js";
import "./TextAreaField.css";

export function TextAreaField({
  id,
  label,
  value,
  onInput,
  rows = 4,
  required,
  placeholder,
}: {
  id: string;
  label: string;
  value: string;
  onInput: (value: string) => void;
  rows?: number;
  required?: boolean;
  placeholder?: string;
}) {
  return (
    <FormField label={label} htmlFor={id}>
      <textarea
        id={id}
        class="ui-form-control ui-text-area"
        value={value}
        rows={rows}
        required={required}
        placeholder={placeholder}
        onInput={(e) => onInput((e.target as HTMLTextAreaElement).value)}
      />
    </FormField>
  );
}