import { Link, useLocation, useNavigate } from "react-router-dom";

import { Icons } from "../index";

export default function Aside() {

  const {pathname} = useLocation()

  const navigate = useNavigate()

  return (
    <div className="py-5 px-10 flex flex-col h-full">
      <div className="flex justify-center items-center text-sm">
        <p className="w-14 h-14 rounded-full bg-[#5C2684]/50 flex items-center justify-center">
          AC
        </p>
      </div>
      <div className="mt-10 h-full overflow-y-auto">
        {asideLinks.map((link, index) => (
            <Link
            key={index}
            to={link.link}
            className={`w-full my-4 flex items-center gap-2 py-2 pl-5 rounded-lg text-base font-medium border-2 ${pathname == link.link ? 'border-[#5C2684] text-[#5C2684]' : 'border-transparent text-[#585858]'}`}
            >
            <Icons name={link.icon} fillColor={`${pathname == link.link ? '#5C2684' : '#585858'}`} />
            {link.name}
            </Link>
        ))}
      </div>
      <div className="w-full flex justify-center items-center">
        <button className="py-3 px-6 bg-red-100 text-red-500 font-medium" onClick={()=>navigate('/login', {replace:true})}>
          Log out
        </button>
      </div>
    </div>
  );
}


type AsideLinksType = {
    name: string,
    link: string,
    icon: string,
    nestedlink?:boolean
}[]
const asideLinks:AsideLinksType = [
    {name: 'Home', link: '/dashboard/home', icon: 'home'},
    {name: 'My Profile', link: '/dashboard/profile', icon: 'profile'},
    {name: 'Verification', link: '/dashboard/verification', icon: 'verification'},
    {name: 'Payments', link: '/dashboard/payments', icon: 'payments'},
    {name: 'Legals', link: '/dashboard/legals', icon: 'legals'},
]