"use client";

import {
  FormControl,
  InputLabel,
  MenuItem,
  OutlinedInput,
  Select,
} from "@mui/material";
function CustomSelectByDependency({
  item,
  filterParameters,
  value,
  handleChange,
  selectOption,
}) {
  return (
    <FormControl fullWidth sx={{ my: 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={value}
        size="small"
        input={<OutlinedInput label={item.header} />}
        onChange={(e) =>
          handleChange({ ...filterParameters, value: e.target.value })
        }
        displayEmpty
      >
        {selectOption.map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

export default CustomSelectByDependency;
