'use client';

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

interface NavLinkProps {
  href: string;
  icon: ReactNode;
  label: string;
  onClick?: () => void;
  className?: string;
}

export function NavLink({ href, icon, label, onClick, className }: NavLinkProps) {
  const pathname = usePathname();
  // Check if path matches (accounting for locale prefix)
  const pathWithoutLocale = pathname.replace(/^\/(de|en|sr)/, '');
  const hrefWithoutLocale = href.replace(/^\/(de|en|sr)/, '');
  const isActive = pathWithoutLocale === hrefWithoutLocale ||
    (hrefWithoutLocale === '' && pathWithoutLocale === '');

  return (
    <Link
      href={href}
      onClick={onClick}
      className={`
        relative flex items-center gap-2 rounded-full py-2.5 px-4 min-h-[44px]
        transition-all duration-200 ease-in-out
        focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2 focus:ring-offset-zinc-950
        ${isActive ? 'text-white bg-zinc-700/60' : 'text-zinc-400 hover:text-white hover:bg-zinc-800/30'}
        ${className || ''}
      `}
    >
      {icon}
      <span className="text-sm tracking-wide">{label}</span>
    </Link>
  );
}