import { ReactNode } from "react"
// import { useLocation } from "react-router-dom"


export default function AsideLinkWithSubLinks({shrinkAside, name, icon, hideSubMenu,  setHideSubMenu, children}) {

    // const btnName = name

//   const {pathname} = useLocation()

//   const [hideSubMenu, setHideSubMenu] = useState(true)

  return (
    // <Link 
    //     className={`w-full flex items-center gap-2 px-4 py-2 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 && <i className={`${icon}`}></i>}
    //     {shrinkAside ? '' : name}
    // </Link>
    <div 
        className={`w-full px-4 text-[13px] font-semibold rounded-md`} 
    >   
        <button onClick={setHideSubMenu} name={name} className="py-2 w-full flex items-center justify-between gap-2 cursor-pointer text-slate-400">
            <span className="flex gap-2 items-center">{icon && <i className={`${icon}`}></i>}{shrinkAside ? '' : name}</span>
            <i className={`fa-solid fa-caret-up  ${(hideSubMenu && hideSubMenu==name) ? 'rotate-0' : 'rotate-180'}`}></i>
        </button>
        <div className={`w-full ${(hideSubMenu && hideSubMenu==name) ? 'block' : 'hidden'}`}>
            {children}
        </div>
    </div>
  )
}