'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'

export interface NavLinkProps {
  href: string
  children: React.ReactNode
  icon?: React.ReactNode
  className?: string
}

export function NavLink({ href, children, icon, className = '' }: NavLinkProps) {
  const pathname = usePathname()
  const isActive = pathname === href || (href !== '/' && pathname.startsWith(href))

  return (
    <Link
      href={href}
      className={`
        flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors
        ${isActive
          ? 'text-white bg-zinc-800'
          : 'text-zinc-400 hover:text-white hover:bg-zinc-800/50'
        }
        ${className}
      `}
    >
      {icon && <span className="w-5 h-5">{icon}</span>}
      {children}
    </Link>
  )
}