import type { ReactNode } from 'react'
import { Suspense } from 'react'
import { AdminNavLink } from './admin-nav-link'
import { SidebarNavLinkSkeleton } from './admin-sidebar-nav-link-skeleton'

export function SidebarNavLink({
  href,
  exact,
  children
}: {
  href: string
  exact?: boolean
  children: ReactNode
}) {
  return (
    <Suspense fallback={<SidebarNavLinkSkeleton href={href}>{children}</SidebarNavLinkSkeleton>}>
      <AdminNavLink href={href} exact={exact}>
        {children}
      </AdminNavLink>
    </Suspense>
  )
}