import { NavLink as RouterNavLink } from 'react-router-dom'

import { cn } from '../../utils/cn'

export function NavLink({ className, children, ...props }) {
  return (
    <RouterNavLink
      className={({ isActive }) =>
        cn(
          'text-label uppercase text-ink-muted transition-colors hover:text-ink',
          isActive && 'text-ink',
          className,
        )
      }
      {...props}
    >
      {children}
    </RouterNavLink>
  )
}