import Link from "next/link";
import { Button } from "@mui/material";
import { usePathname } from "next/navigation";

// Icons
import CalendarP from "@/components/icons/CalendarP";
import CategoryP from "@/components/icons/CategoryP";
import ProfileAddP from "@/components/icons/ProfileAddP";
import ProfileCircleP from "@/components/icons/ProfileCircleP";

function Links({ open, setActive }) {
  const list = [
    { name: "دشبورد", src: "/panel/dashboard", icon: <CategoryP /> },
    {
      name: "حساب کاربری",
      src: "/panel/user-account",
      icon: <ProfileCircleP />,
    },
    {
      name: "اضافه کردن پزشک",
      src: "/panel/add-doctor",
      icon: <ProfileAddP />,
    },
    { name: "نوبت ها", src: "/panel/turns", icon: <CalendarP /> },
  ];

  const pathname = usePathname();

  return (
    <ul
      className={`flex flex-col gap-[32px] mt-[36px] md:mt-[54px] transition-all duration-500`}
    >
      {list.map((item, idx) => (
        <li key={idx}>
          <Link href={item.src}>
            <Button
              fullWidth
              variant="text"
              onClick={() => setActive(false)}
              className={`
                !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
                ${
                  item.src === pathname
                    ? "!bg-[#5559CE] dark:!bg-[#1F1D2B] dark-active-icon"
                    : ""
                }
              `}
            >
              <div className="p-[3px] bg-[#E5E9FF] dark:bg-transparent rounded-[4px] w-fit">
                <div className="w-[20px] h-[20px]">{item.icon}</div>
              </div>
              <p
                className={`
                  transition-all duration-500 text-sidebar
                  ${open ? "opacity-100" : "md:opacity-0"}
                  ${
                    item.src === pathname
                      ? "!text-[#FAFAFA] dark:!text-[#5559CE] !font-bold"
                      : "!text-[#525252] dark:!text-[#A1A1A1] !font-medium"
                  }
                `}
              >
                {item.name}
              </p>
            </Button>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export default Links;