'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { getLocaleFromPath } from '@/lib/i18n';

interface NavigationProps {
  locale: string;
  variant?: 'header' | 'footer';
}

export function Navigation({ locale, variant = 'header' }: NavigationProps) {
  const pathname = usePathname();
  const currentLocale = getLocaleFromPath(pathname);

  // Main navigation menu
  const mainMenu = [
    { title: 'Home', path: `/${locale}` },
    { title: 'Blog', path: `/${locale}/blog` },
    { title: 'Products', path: `/${locale}/products` },
    { title: 'Contact', path: `/${locale}/contact` }
  ];

  // Determine styles based on variant
  const isHeader = variant === 'header';
  const baseClasses = isHeader 
    ? 'hidden md:flex items-center gap-1' 
    : 'flex flex-col gap-2';
  
  const linkClasses = isHeader
    ? 'px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary hover:bg-primary-light rounded-lg transition-colors relative'
    : 'text-sm text-gray-600 hover:text-primary transition-colors';

  const activeClasses = isHeader
    ? 'text-primary bg-primary-light font-semibold'
    : 'text-primary font-medium';

  return (
    <nav className={baseClasses}>
      {mainMenu.map((item) => {
        const isActive = pathname === item.path || 
                        (item.path !== `/${locale}` && pathname.startsWith(item.path));
        
        return (
          <Link
            key={item.path}
            href={item.path}
            className={`${linkClasses} ${isActive ? activeClasses : ''}`}
          >
            {item.title}
            {isActive && isHeader && (
              <span className="absolute bottom-0 left-3 right-3 h-0.5 bg-primary rounded-full" />
            )}
          </Link>
        );
      })}
    </nav>
  );
}