import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { SidebarProps, MenuItem } from "./types";

function Sidebar({
  projectName,
  projectDescription,
  projectIcon,
  menuItems,
  onLogout,
}: SidebarProps) {
  // const router = useRouter();
  const { pathname } = useRouter();

  const selectedClass =
    "text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-200 ";
  const unSelectedClass =
    "text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700";

  const menuClass = (menuItem: MenuItem) =>
    (!menuItem.selected && pathname.includes(menuItem.link)) ||
    menuItem.selected?.(pathname)
      ? selectedClass
      : unSelectedClass;

  return (
    <div className="sidebar flex flex-col w-40 text-center h-screen py-3 bg-white border-l dark:bg-gray-800 dark:border-gray-600">
      <div className="flex flex-col text-gray-600 items-center">
        {projectIcon}
        <h2 className="text-2xl font-semibold text-gray-700 dark:text-white">
          {projectName}
        </h2>
        <p className="text-xs mt-1">{projectDescription}</p>
      </div>

      <div className="flex flex-col justify-between flex-1 mt-6">
        <nav>
          {menuItems.map((menuItem, i) =>
            menuItem === "divider" ? (
              <hr
                key={i}
                className="my-6 border-gray-200 dark:border-gray-600"
              />
            ) : (
              <Link key={i} href={menuItem.link}>
                <a
                  className={`flex flex-col gap-2 text-center justify-center py-4 mb-5 items-center 
                  ${menuClass(menuItem)}`}
                >
                  <span className="text-xl">{menuItem.icon}</span>
                  <span className="text-sm font-medium px-1">
                    {menuItem.title}
                  </span>
                </a>
              </Link>
            )
          )}
        </nav>

        <div className="flex flex-col gap-2 pb-4 items-center px-4 -mx-2">
          <img
            className="object-cover mx-2 rounded-full h-9 w-9"
            src="/assets/images/avatar.svg"
            alt="avatar"
          />
          <div
            onClick={() => !!onLogout && onLogout()}
            className="mx-2 text-sm font-bold text-blue-500 dark:text-blue-400 cursor-pointer hover:underline"
          >
            خروج
          </div>
        </div>
      </div>
    </div>
  );
}

export default Sidebar;