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

export default function CommonFloatingTextArea({
  level_name, value, on_change_data,
  rows = 4, required = false, disabled = false,
}: CommonTextAreaProps) {
  // FIX 1: was hardcoded id="description" — clashed with every other textarea
  // FIX 2: htmlFor was "floatingProject" but id was "description" — label never matched its input
  const fieldId = `floating-textarea-${level_name.toLowerCase().replace(/\s+/g, "-")}`;
  return (
    <div className="form-floating">
      <textarea
        className="form-control"
        id={fieldId}
        placeholder={level_name}
        style={{ height: rows * 32 }}
        value={value}
        required={required}
        disabled={disabled}
        onChange={(e) => on_change_data?.(e.target.value)}
      />
      <label htmlFor={fieldId}>{level_name}</label>
    </div>
  );
}