import { useForm } from '../../context/FormContext';

export default function TextInput({ field, sectionId }) {
  const { formState, updateTextField } = useForm();
  const value = formState.sections[sectionId]?.[field.id] || '';

  return (
    <div className="text-input" id={`field-${field.id}`}>
      <label className="text-input__label" htmlFor={`input-${field.id}`}>
        {field.label}
      </label>
      <input
        id={`input-${field.id}`}
        type={field.type === 'number' ? 'number' : 'text'}
        className="text-input__field"
        placeholder={field.placeholder || ''}
        value={value}
        onChange={e => updateTextField(sectionId, field.id, e.target.value)}
        min={field.type === 'number' ? '0' : undefined}
      />
      {field.sentence && (
        <div className="text-input__sentence">{field.sentence}</div>
      )}
    </div>
  );
}