frontPanel/src/pages/Questions/Select.tsx

import { useState, useEffect } 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[];
  activeItemIndex?: number;
  empty?: boolean;
  onChange?: (item: string, num: number) => void;
  sx?: SxProps;
};

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

  useEffect(() => {
    setActiveItem(activeItemIndex);
  }, [activeItemIndex]);

  const handleChange = (event: SelectChangeEvent) => {
    const activeItemIndex = Number(event.target.value);
    setActiveItem(activeItemIndex);
    onChange?.(items[activeItemIndex], activeItemIndex);
  };

  return (
    <FormControl
      fullWidth
      size="small"
      sx={{ width: "100%", height: "48px", ...sx }}
    >
      <MuiSelect
        id="display-select"
        variant="outlined"
        value={activeItem === -1 ? "" : 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>
  );
};