import React from 'react';
import {
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  SelectChangeEvent,
  ListItemIcon,
  ListItemText,
} from '@mui/material';
import { SIDEBAR_LINKS } from '@/constants/SidebarLink.constants';

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"
      >
        {SIDEBAR_LINKS.map((link:any) => (
          <MenuItem key={link.path} value={link.path}>
            <ListItemText primary={link.title} />
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}