'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import clsx from 'clsx'
import type { ReactNode } from 'react'

interface NavLinkProps {
  href: string
  className?: string
  /** Extra classes applied when the link is active */
  activeClassName?: string
  /** Extra classes applied when the link is inactive */
  inactiveClassName?: string
  /** Show the → arrow indicator for active state (used in the main nav) */
  showArrow?: boolean
  children: ReactNode
}

export function NavLink({
  href,
  className,
  activeClassName,
  inactiveClassName,
  showArrow = false,
  children,
}: NavLinkProps) {
  const pathname = usePathname()
  const isActive =
    href === '/' ? pathname === '/' : pathname === href || pathname.startsWith(href + '/')

  return (
    <Link
      href={href}
      className={clsx(
        className,
        isActive ? activeClassName : inactiveClassName,
        // Simple NavLink.astro behaviour: underline on active when no explicit activeClassName
        !activeClassName && !inactiveClassName && isActive
          ? 'underline decoration-1 underline-offset-2'
          : undefined,
      )}
    >
      {showArrow && isActive && (
        <span aria-hidden="true" className="text-ink absolute top-2.5 left-1 text-[11px]">
          →
        </span>
      )}
      {children}
    </Link>
  )
}