import { useForm } from '../../context/FormContext';
import { getTemplateData } from '../../data/templateData';
import { User } from 'lucide-react';

export default function PatientHeader() {
  const { formState, updatePatientInfo } = useForm();
  const HEADER_FIELDS = getTemplateData()?.headerFields || [];
  return (
    <div className="section" id="section-patient-header">
      <div className="section__header">
        <div className="section__header-icon">
          <User size={20} />
        </div>
        <h2 className="section__title">Patient Information</h2>
      </div>

      <div className="subsection">
        <div className="subsection__title">
          <span className="subsection__title-dot" />
          Header Fields
        </div>

        <div className="patient-header">
          {HEADER_FIELDS.map(field => (
            <div className="text-input" key={field.id}>
              <label className="text-input__label" htmlFor={`header-${field.id}`}>
                {field.label}
              </label>
              <input
                id={`header-${field.id}`}
                type={field.type === 'number' ? 'number' : 'text'}
                className="text-input__field"
                placeholder={field.placeholder}
                value={formState.patientInfo[field.id] || ''}
                onChange={e => updatePatientInfo(field.id, e.target.value)}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}