'use client'

import Link, { LinkProps } from 'next/link'

import { usePathname } from 'next/navigation'
import { Button } from './ui/button'

interface NavLinkProps extends LinkProps {
  variant:
    | 'default'
    | 'secondary'
    | 'third'
    | 'destructive'
    | 'outline'
    | 'ghost'
    | 'link'
    | null
    | undefined
  children: React.ReactNode
  className?: React.HTMLProps<HTMLElement>['className']
}

export function NavLink(props: NavLinkProps) {
  const pathname = usePathname()

  return (
    <Button
      data-current={pathname === props.href}
      className={`data-[current=true]:font-semibold text-gray-50 ${props.className}`}
      variant={props.variant}
      asChild
    >
      <Link href={props.href}>{props.children}</Link>
    </Button>
  )
}
