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

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

  const {pathname} = useLocation()

  return (
    <Link 
        className={`w-full flex items-center gap-2 px-4 py-2 my-1 text-[13px] font-semibold rounded-md hover:text-white-light hover:bg-white/10 ${pathname == to ? 'bg-white/10 text-white-light' : 'text-slate-400'}`} 
        to={to}
    >   
        {/* {icon && <span className={`after:content-['24']`}></span>} */}
        {icon && <i className={`${icon}`}></i>}
        {shrinkAside ? '' : name}
    </Link>
  )
}