import React from "react";
import {
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  SelectChangeEvent,
} from "@mui/material";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import { SIDEBAR_LINKS } from "@/app/features/dashboard/sidebar/SidebarLink.constants";
import { ISidebarLink } from "@/app/features/dashboard/sidebar/SidebarLink.interfaces";
import { Em } from "./Em"; // If you still want to create a component for the <em> tag
import PageLinks from "../../../../components/PageLinks/PageLinks";
import "./DropDown.scss"; // Import the SCSS file

interface Props {
  onChange?: (event: SelectChangeEvent<string>) => void;
}

export default function SidebarDropdown({ onChange }: Props) {
  const [value, setValue] = React.useState("");

  const handleChange = (event: SelectChangeEvent<string>) => {
    setValue(event.target.value);
    onChange?.(event);
  };

  return (
    <FormControl fullWidth variant="outlined" sx={{ maxWidth: 200 }}>
      <InputLabel id="sidebar-dropdown-label">Navigate To</InputLabel>
      <Select
        labelId="sidebar-dropdown-label"
        value={value}
        onChange={handleChange}
        label="Navigate To"
        MenuProps={{
          PaperProps: {
            style: {
              maxHeight: 200,
            },
          },
        }}
      >
        <MenuItem value="" disabled></MenuItem>
        <div className="dropdown-container">
          {SIDEBAR_LINKS.map((link: ISidebarLink) => (
            <PageLinks
              key={link.path}
              title={link.title}
              path={link.path}
              icon={link.icon}
            />
          ))}
        </div>
      </Select>
    </FormControl>
  );
}