import { FC } from "react";
import {
  Box,
  Grid,
  Typography,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Drawer,
} from "@mui/material";
import Link from "next/link";

const MenuItem = ({ name, href, iconSize }: any) => (
  <Link href={href} passHref>
    <ListItem button>
      <ListItemIcon
        sx={{
          color: `black !important`,
        }}
      >
        <Box
          sx={{
            width: iconSize,
            height: iconSize,
            ml: `${(20 - iconSize) / 2}px`,
            mr: `${(20 - iconSize) / 2}px`,
          }}
        >
          {/*     <Image src={icon} alt="" /> */}
        </Box>

        <ListItemText
          primary={
            <Typography
              variant="body1"
              style={{
                color: "#000 !important",
                fontSize: 14,
                fontFamily: "Roboto",
                fontWeight: 400,
                marginLeft: 10,
                marginTop: -3,
              }}
            >
              {name}
            </Typography>
          }
        />
      </ListItemIcon>
    </ListItem>
  </Link>
);

interface SidebarProps {
  open: boolean;
}

export const Sidebar: FC<SidebarProps> = ({ open }) => (
  <Drawer
    sx={{ width: 300, flexShrink: 0, backgroundColor: "black !important" }}
    variant="permanent"
    anchor="left"
    open={open}
    PaperProps={{
      sx: {
        width: 300,
        border: 0,

        backgroundColor: "black !important",
      },
    }}
  >
    <Grid
      container
      direction="column"
      justifyContent="space-between"
      wrap="nowrap"
      sx={{ backgroundColor: "black", height: "100%" }}
    >
      <Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
        <List component="nav">
          <MenuItem name="" href="/" iconSize={20} />
          <MenuItem name="" href="/create" iconSize={20} />
          <MenuItem name="" href="/trends" iconSize={13} />
          <MenuItem name="" href="/faq" iconSize={20} />
          <MenuItem name="" href="/about" iconSize={20} />
        </List>
      </Grid>
    </Grid>
  </Drawer>
);