import * as React from "react";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import type { NavigationItem } from "../model";
import { useNavigate } from "react-router-dom";

interface NavigationItemProps {
  item: NavigationItem;
  open: boolean;
}

export const NavigationItemComponent: React.FC<NavigationItemProps> = ({
  item,
  open,
}) => {
  const Icon = item.icon;
  const navigate = useNavigate();

  return (
    <ListItem
      onClick={() => navigate(item.path)}
      disablePadding
      sx={{ display: "block" }}
    >
      <ListItemButton
        sx={[
          {
            minHeight: 48,
            px: 2.5,
          },
          open
            ? {
                justifyContent: "initial",
              }
            : {
                justifyContent: "center",
              },
        ]}
      >
        <ListItemIcon
          sx={[
            {
              minWidth: 0,
              justifyContent: "center",
            },
            open
              ? {
                  mr: 3,
                }
              : {
                  mr: "auto",
                },
          ]}
        >
          <Icon />
        </ListItemIcon>
        <ListItemText
          primary={item.label}
          sx={[
            open
              ? {
                  opacity: 1,
                }
              : {
                  opacity: 0,
                },
          ]}
        />
      </ListItemButton>
    </ListItem>
  );
};