import { Link, useLocation } from "react-router-dom"
import Icons from "../../Icons"
import { GeneralLayoutContext } from "../../../context/GeneralLayoutContext"

export default function AsideLink({name, to, icon}) {

    const {shrinkAside, setShowAsideDrawer} = GeneralLayoutContext()

  const {pathname} = useLocation()

  return (
    <Link 
        className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] sm:text-sm font-semibold rounded-md hover:bg-white dark:hover:bg-black-box text-slate-500 dark:text-white-body/80 ${pathname === to ? 'bg-white-body dark:bg-black-box' : ''}`} 
        to={to}
        onClick={()=>setShowAsideDrawer(false)}
    >   
        {icon && <Icons name={icon} />}
        {shrinkAside ? '' : name}
    </Link>
  )
}