type CommonTextAreaProps = {
  level_name: string;
  value: string;
  on_change_data?: (value: string) => void;
  rows?: number;
  required?: boolean;
  disabled?: boolean;
};

export default function CommonTextArea({
  level_name, value, on_change_data,
  rows = 3, required = false, disabled = false,
}: CommonTextAreaProps) {
  // FIX: was hardcoded id="description" — every instance clashed on the same page
  const fieldId = `textarea-${level_name.toLowerCase().replace(/\s+/g, "-")}`;
  return (
    <>
      <label htmlFor={fieldId}>{level_name}</label>
      <textarea
        className="form-control"
        id={fieldId}
        rows={rows}
        value={value}
        required={required}
        disabled={disabled}
        onChange={(e) => on_change_data?.(e.target.value)}
      />
    </>
  );
}