'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { getLocaleFromPath, getLocalizedPath, t, type Locale } from '@/lib/i18n';

export function LocaleSwitcher() {
  const pathname = usePathname();
  const currentLocale = getLocaleFromPath(pathname);

  const locales: Locale[] = ['en', 'de'];
  
  return (
    <div className="inline-flex items-center gap-2 bg-white rounded-lg border border-gray-200 p-1 shadow-sm">
      {locales.map((locale) => {
        const isActive = currentLocale === locale;
        const label = locale === 'en' ? 'English' : 'Deutsch';
        const flag = locale === 'en' ? '🇺🇸' : '🇩🇪';
        
        // Get the current path without locale
        const currentPath = pathname.replace(/^\/(de|en)/, '') || '/';
        const href = getLocalizedPath(currentPath, locale);
        
        return (
          <Link
            key={locale}
            href={href}
            className={`px-4 py-2 text-sm font-medium rounded-md transition-all ${
              isActive
                ? 'bg-blue-600 text-white shadow-sm'
                : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
            }`}
            aria-label={`Switch to ${label}`}
            locale={locale}
          >
            <span className="inline-flex items-center gap-2">
              <span className="text-base">{flag}</span>
              <span>{label}</span>
            </span>
          </Link>
        );
      })}
    </div>
  );
}