frontPanel/src/pages/Questions/Select.tsx

import { useState } from "react";
import {
  Select as MuiSelect,
  MenuItem,
  FormControl,
  useTheme,
} from "@mui/material";

import ArrowDown from "@icons/ArrowDownIcon";

import type { SelectChangeEvent, SxProps } from "@mui/material";

type SelectProps = {
  items: string[];
  empty?: boolean;
  onChange?: (num: number) => void;
  sx?: SxProps;
};

export const Select = ({ items, empty, onChange, sx }: SelectProps) => {
  const [activeItem, setActiveItem] = useState<number>(empty ? -1 : 0);

  const theme = useTheme();

  const handleChange = (event: SelectChangeEvent) => {
    setActiveItem(Number(event.target.value));
    onChange?.(Number(event.target.value));
  };

  return (
    <FormControl
      fullWidth
      size="small"
      sx={{
        width: "100%",
        height: "48px",
        ...sx,
      }}
    >
      <MuiSelect
        id="display-select"
        variant="outlined"
        value={String(activeItem)}
        displayEmpty
        onChange={handleChange}
        sx={{
          width: "100%",
          height: "48px",
          borderRadius: "8px",
          "& .MuiOutlinedInput-notchedOutline": {
            border: `1px solid ${theme.palette.brightPurple.main} !important`,
            height: "48px",
            borderRadius: "10px",
          },
        }}
        MenuProps={{
          PaperProps: {
            sx: {
              mt: "8px",
              p: "4px",
              borderRadius: "8px",
              border: "1px solid #EEE4FC",
              boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
            },
          },
          MenuListProps: {
            sx: {
              py: 0,
              display: "flex",
              flexDirection: "column",
              gap: "8px",
              "& .Mui-selected": {
                backgroundColor: theme.palette.background.default,
                color: theme.palette.brightPurple.main,
              },
            },
          },
        }}
        inputProps={{
          sx: {
            color: theme.palette.brightPurple.main,
            display: "flex",
            alignItems: "center",
            px: "9px",
            gap: "20px",
          },
        }}
        IconComponent={(props) => <ArrowDown {...props} />}
      >
        {items.map((item, index) => (
          <MenuItem
            key={item + index}
            value={index}
            sx={{
              display: "flex",
              alignItems: "center",
              gap: "20px",
              padding: "10px",
              borderRadius: "5px",
              color: theme.palette.grey2.main,
            }}
          >
            {item}
          </MenuItem>
        ))}
      </MuiSelect>
    </FormControl>
  );
};