'use client';
import { usePathname } from 'next/navigation';
import Link from 'next/link';

export function NavLink({ href, children }) {
  const pathname = usePathname();
  const isActive = pathname === href || pathname.startsWith(href + '/');
  return (
    <Link
      href={href}
      className={`px-5 py-3 rounded-lg font-semibold transition-all duration-300 text-lg relative group ${
        isActive 
          ? 'text-amber-600 bg-amber-50' 
          : 'text-gray-700 hover:text-amber-600 hover:bg-gray-100'
      }`}
    >
      {children}
      <span className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 transition-all duration-300 ${
        isActive ? 'w-4/5 bg-amber-600' : 'w-0 bg-amber-600 group-hover:w-4/5'
      }`}></span>
    </Link>
  );
}

export function MobileNavLink({ href, children, onClick }) {
  const pathname = usePathname();
  const isActive = pathname === href || pathname.startsWith(href + '/');
  return (
    <Link
      href={href}
      onClick={onClick}
      className={`block px-3 py-2 rounded-md text-base font-medium transition-colors ${
        isActive 
          ? 'text-amber-600 bg-amber-50' 
          : 'text-gray-700 hover:text-amber-600 hover:bg-gray-50'
      }`}
    >
      {children}
    </Link>
  );
}