import { ReactNode } from 'react'

export interface ParentProfileInputProps {
  parent: {
    salaryType?: string
    employmentStatus?: string
  }
  onChange: (field: string, val: string) => void
}

export function ParentProfileInput({
  parent,
  onChange,
}: ParentProfileInputProps): ReactNode {
  return (
    <div data-testid="parent-profile-input" className="parent-profile-input">
      <div className="parent-profile-input__field">
        <label htmlFor="salary-type" className="parent-profile-input__label">
          Salary Type
        </label>
        <select
          id="salary-type"
          value={parent.salaryType || ''}
          onChange={(e) => onChange('salaryType', e.target.value)}
          data-testid="salary-type"
          className="parent-profile-input__select"
        >
          <option value="">Choose salary type</option>
          <option value="monthly">Monthly</option>
          <option value="hourly">Hourly</option>
          <option value="self_employed">Self Employed</option>
        </select>
      </div>

      <div className="parent-profile-input__field">
        <label htmlFor="employment-status" className="parent-profile-input__label">
          Employment Status
        </label>
        <select
          id="employment-status"
          value={parent.employmentStatus || ''}
          onChange={(e) => onChange('employmentStatus', e.target.value)}
          data-testid="employment-status"
          className="parent-profile-input__select"
        >
          <option value="">Choose employment status</option>
          <option value="employed">Employed</option>
          <option value="self_employed">Self Employed</option>
          <option value="parental_leave">On Parental Leave</option>
        </select>
      </div>
    </div>
  )
}