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 }) {
  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"
              className={`
                !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
                ${item.src === pathname ? "!bg-[#5559CE]" : ""}
              `}
            >
              <div className="p-[3px] bg-[#E5E9FF] 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] !font-bold"
                                    : "!text-[#525252] !font-medium"
                                }
                            `}
              >
                {item.name}
              </p>
            </Button>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export default Links;