type CommonInputFieldProps = {
  level_name: string;
  value: string;
  on_change_data?: (value: string) => void;
  type?: string;
  placeholder?: string;
  required?: boolean;
  disabled?: boolean;
};

export default function CommonInputField({
  level_name, value, on_change_data,
  type = "text", placeholder, required = false, disabled = false,
}: CommonInputFieldProps) {
  // FIX: derive unique id from label — prevents DOM id clashes when multiple instances on same page
  const fieldId = `input-${level_name.toLowerCase().replace(/\s+/g, "-")}`;
  return (
    <>
      <label htmlFor={fieldId}>{level_name}</label>
      <input
        className="form-control"
        id={fieldId}
        type={type}
        value={value}
        placeholder={placeholder ?? level_name}
        required={required}
        disabled={disabled}
        onChange={(e) => on_change_data?.(e.target.value)}
      />
    </>
  );
}