import CalendarP from "@/components/icons/CalendarP";
import CategoryP from "@/components/icons/CategoryP";
import ProfileAddP from "@/components/icons/ProfileAddP";
import ProfileCircleP from "@/components/icons/ProfileCircleP";
import { Button } from "@mui/material";
import { useState } from "react";

function Links() {

    const list = [
        { name: 'دشبورد', icon: <CategoryP /> },
        { name: 'حساب کاربری', icon: <ProfileCircleP /> },
        { name: 'اضافه کردن پزشک', icon: <ProfileAddP /> },
        { name: 'نوبت ها', icon: <CalendarP /> }
    ];

    const [value, setValue] = useState(0);

    return (
        <ul className="flex flex-col gap-[32px] mt-[54px]">
            {list.map((item, idx) => (
                <li
                    key={idx}
                    className="p-[8px]"
                >
                    <Button
                        fullWidth
                        variant="text"
                        onClick={() => setValue(idx)}
                        className={`
                            !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
                            ${idx === value ? '!bg-[#5559CE] !text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
                        `}
                    >

                        <div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
                            {item.icon}
                        </div>
                        {item.name}
                    </Button>
                </li>
            ))}
        </ul>
    )
}

export default Links