import { FC } from "react";
import { TextField, Autocomplete as AutocompleteInternal } from "@mui/material";
import { colors } from "../styles/theme";

type AutocompleteProps = {
  name: string;
  label: string;
  options: any[];
  formState: Record<string, any>;
  updateFormState: (name: string, value: any) => void;
  disabled?: boolean;
  required?: boolean;
};

export const Autocomplete: FC<AutocompleteProps> = ({
  name,
  label,
  options,
  formState,
  updateFormState,
  disabled = false,
  required = false,
}) => (
  <AutocompleteInternal
    disablePortal
    options={options}
    value={formState.values[name] || ""}
    onChange={(e: any) => updateFormState?.(name, e.target.id)}
    fullWidth
    size="small"
    renderInput={(params) => (
      <TextField
        {...params}
        name={name}
        label={label}
        disabled={disabled}
        required={required}
        sx={{ backgroundColor: colors.white }}
      />
    )}
  />
);