"use client";

import { FC } from "react";
import {
  Box,
  Typography,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  ListItemSecondaryAction,
} from "@mui/material";
import Link from "next/link";
import Image from "next/image";
import { fonts } from "../styles/theme";

const openWidth = 270;
const closedWidth = 100;

export const SidebarItem: FC = ({
  name,
  href,
  Icon,
  iconSize,
  inset = false,
  selected = false,
  open = true,
  badge,
  target = "_self",
}: any) => (
  <Link href={href} target={target}>
    <ListItemButton
      sx={{
        p: 0,
        mb: 1,
        bl: iconSize === 0 ? "1px solid white" : "inherit",
      }}
      selected={selected}
    >
      {iconSize > 0 ? (
        <ListItemIcon
          sx={{
            color: `white`,
            minWidth: 0,
            mr: 2,
            textAlign: "center",
            margin: open ? "0 8 0 0" : "0 auto",
          }}
        >
          <Box
            sx={{
              width: iconSize,
              height: iconSize,
              mr: 0.5,
              mt: "-4px",
            }}
          >
            <Icon />
          </Box>
        </ListItemIcon>
      ) : (
        <Box
          sx={{
            width: 30,
            height: "28px",
            position: "relative",
            ml: "9px",
            mr: "1px",
          }}
        >
          <Box
            sx={{
              width: "1px",
              height: "56px",
              backgroundColor: "white",
              position: "absolute",
              left: "3px",
              top: "-10px",
            }}
          />
          <Box
            sx={{
              width: "42px",
              height: "42px",
              position: "absolute",
              top: "-27px",
              left: "3px",
              border: "solid 1px #fff",
              borderColor: "transparent transparent transparent #fff",
              borderRadius: "60px",
              rotate: "-35deg",
            }}
          />
        </Box>
      )}
      {open && (
        <ListItemText
          inset={inset}
          primary={
            <Typography
              variant="body1"
              sx={{
                fontSize: 16,
                fontWeight: "bold",
                border: 0,
                textAlign: "left",
                color: "white",
              }}
            >
              {name}
            </Typography>
          }
        />
      )}
      {badge && badge > 0 ? (
        <ListItemSecondaryAction>
          <Typography
            color="textSecondary"
            variant="body1"
            className="badge"
            sx={{
              backgroundColor: "#FFB620",
              color: "black !important",
              borderRadius: 10,
              px: 1,
              fontSize: 12,
              fontWeight: "bold",
            }}
          >
            {badge}
          </Typography>
        </ListItemSecondaryAction>
      ) : null}
    </ListItemButton>
  </Link>
);