shoc-frontend-new/src/app/(protected)/employees/_components/job-title-select.tsx

import { Controller, type Control, type UseFormSetValue } from "react-hook-form";
import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
import { JOB_TITLE_OPTIONS } from "@/domain/employees/constants/job-title-options";
import type { EmployeeFormValues } from "@/domain/employees/schemas/employee-schema";

interface JobTitleSelectProps {
  control: Control<EmployeeFormValues>;
  setValue: UseFormSetValue<EmployeeFormValues>;
}

export function JobTitleSelect({ control, setValue }: JobTitleSelectProps) {
  return (
    <Controller
      name="jobTitleId"
      control={control}
      render={({ field }) => (
        <FormControl fullWidth>
          <InputLabel id="jobTitleId-label">Job Title</InputLabel>
          <Select
            labelId="jobTitleId-label"
            label="Job Title"
            value={field.value ?? ""}
            onChange={(event) => {
              const value = String(event.target.value);
              const nextId = value === "" ? null : Number(value);
              field.onChange(nextId);
              const label = JOB_TITLE_OPTIONS.find((option) => option.id === nextId)?.label ?? "";
              setValue("jobTitle", label, { shouldDirty: true });
            }}
          >
            <MenuItem value="">
              <em>Select...</em>
            </MenuItem>
            {JOB_TITLE_OPTIONS.map((option) => (
              <MenuItem key={option.id} value={option.id}>
                {option.label}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      )}
    />
  );
}