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] !text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
                            `}
                        >

                            <div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
                                {item.icon}
                            </div>
                            <p className={`
                                transition-all duration-500
                                ${open ? 'opacity-100' : 'md:opacity-0'}
                            `}>{item.name}</p>
                        </Button>
                    </Link>
                </li>
            ))}
        </ul>
    )
}

export default Links