import React from "react";

import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import MuiSelect, { SelectChangeEvent, SelectProps } from "@mui/material/Select";

export type FilterSelectProps = SelectProps & {
  label: string;
  items: { label: string; value: string }[];
  value: string;
  onChange: (event: SelectChangeEvent) => void;
};

export const Select: React.FC<FilterSelectProps> = ({
  label,
  value,
  onChange,
  items,
  size = "small",
  ...props
}) => {
  return (
    <FormControl size={size}>
      <InputLabel>{label}</InputLabel>
      <MuiSelect label={label} value={value} onChange={onChange} {...props}>
        {items.map(({ label, value }) => (
          <MenuItem key={value} value={value}>
            {label}
          </MenuItem>
        ))}
      </MuiSelect>
    </FormControl>
  );
};

export default Select;