"use client";
import {
  Card,
  Typography,
  List,
  ListItem,
  ListItemPrefix,
  ListItemSuffix,
  Chip,
} from "@material-tailwind/react";
import {
  PresentationChartBarIcon,
  ShoppingBagIcon,
  UserCircleIcon,
  Cog6ToothIcon,
  InboxIcon,
  PowerIcon,
} from "@heroicons/react/24/solid";
import React from "react";
import Link from "next/link";
import CheckPath from "../routeur/routeur_layout";

export function Sidebar() {
  const menuItem = [
    {
      title: "Dashboard",
      link: "/dashboard",
      prefix: PresentationChartBarIcon,
      suffix: "",
    },
    {
      title: "Mes Cours",
      link: "/dashboard/mes-cours",
      prefix: ShoppingBagIcon,
      suffix: "",
    },
    {
      title: "Messages",
      link: "/dashboard/messages",
      prefix: InboxIcon,
      suffix: "14",
    },
    {
      title: "Profil",
      link: "/dashboard/profil",
      prefix: UserCircleIcon,
      suffix: "",
    },
    {
      title: "Deconnexion",
      link: "/",
      prefix: PowerIcon,
      suffix: "",
    },
  ];
  return (
    <Card className="h-[calc(80vh-2rem)] w-full max-w-[20rem] p-4 border-2 rounded-none ">
      <List className="text-vert_fonce font-bold ">
        {menuItem.map(({ title, prefix, suffix ,link},index) => (
          <Link key={index} href={link}>
            <ListItem defaultChecked selected = {CheckPath(link)}>
              <ListItemPrefix>
                {React.createElement(prefix, { className: "h-5 w-5" })}
              </ListItemPrefix>
              {title}
              {suffix && (
                <ListItemSuffix>
                  <Chip
                    value={suffix}
                    size="sm"
                    color="yellow"
                    className="rounded-full text-md"
                  />
                </ListItemSuffix>
              )}
            </ListItem>
          </Link>
        ))}
      </List>
    </Card>
  );
}