"use client";

import {
  FormControl,
  InputLabel,
  MenuItem,
  OutlinedInput,
  Select,
} from "@mui/material";
function CustomSelect({ item, filterParameters, handleChange }) {
  return (
    <FormControl fullWidth sx={{ marginY: 1 }} size="small">
      <InputLabel id={`label${item.id}`} shrink>
        {item.header}
      </InputLabel>
      <Select
        labelId={`label${item.id}`}
        id={item.id}
        name={`${item.id}.value`}
        value={filterParameters.value}
        input={<OutlinedInput label={item.header} />}
        size="small"
        onChange={(e) =>
          handleChange({ ...filterParameters, value: e.target.value })
        }
        displayEmpty
      >
        {item.selectOption().map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

export default CustomSelect;
