shoc-frontend-new/src/app/(protected)/vendors/_components/vendor-state-select-field.tsx

import type { Ref } from "react";
import { Autocomplete, TextField } from "@mui/material";
import {
  US_STATE_CODES,
  formatStateOptionLabel,
  normalizeStateCode,
  type StateCode,
} from "@/data/areas";

interface VendorStateSelectFieldProps {
  value: string;
  onChange: (value: string) => void;
  onBlur?: () => void;
  inputRef?: Ref<HTMLInputElement>;
  error?: boolean;
  helperText?: string;
}

/**
 * Closed, searchable list of the 50 US states for the vendor company.
 * Legacy full names are shown as their canonical code. Service Area is chosen
 * independently, so no Area is derived from the selected State here.
 */
export function VendorStateSelectField({
  value,
  onChange,
  onBlur,
  inputRef,
  error,
  helperText,
}: VendorStateSelectFieldProps) {
  const selected: StateCode | null = normalizeStateCode(value);
  return (
    <Autocomplete<StateCode>
      options={US_STATE_CODES}
      value={selected}
      onChange={(_event, option) => onChange(option ?? "")}
      onBlur={onBlur}
      getOptionLabel={formatStateOptionLabel}
      fullWidth
      renderInput={(params) => (
        <TextField
          {...params}
          label="State (required)"
          placeholder="Select a state"
          inputRef={inputRef}
          error={error}
          helperText={helperText}
          slotProps={{
            ...params.slotProps,
            htmlInput: { ...params.slotProps?.htmlInput, required: true },
          }}
        />
      )}
    />
  );
}