'use client';

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

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}
            locale={locale}
            passHref
          >
            <Button
              variant={isActive ? 'primary' : 'ghost'}
              size="sm"
              className={`transition-all ${isActive ? 'shadow-sm' : ''}`}
              aria-label={`Switch to ${label}`}
            >
              <span className="inline-flex items-center gap-2">
                <span className="text-base">{flag}</span>
                <span className="font-medium">{label}</span>
              </span>
            </Button>
          </Link>
        );
      })}
    </div>
  );
}