'use client';

/**
 * Language Switcher Component
 * 
 * Switches between English and Arabic with full dark mode support.
 * Standardized to h-9 height to match the ThemeToggle component.
 */

import React from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { locales } from '@/i18n';
import { cn } from '@/lib/utils';

interface LanguageSwitcherProps {
  currentLocale: string;
  className?: string;
  theme?: 'light' | 'dark';
}

export function LanguageSwitcher({ currentLocale, className }: LanguageSwitcherProps) {
  const pathname = usePathname();

  // Remove current locale from pathname to get the base path
  const pathWithoutLocale = pathname ? pathname.replace(/^\/[^/]+/, '') : '';

  return (
    <div
      className={cn(
        'inline-flex items-center gap-1 p-1 h-9 rounded-xl border shrink-0',
        'bg-surface-soft border-border dark:bg-zinc-900 dark:border-zinc-800',
        className
      )}
    >
      {locales.map((locale) => {
        const isActive = locale === currentLocale;
        const href = `/${locale}${pathWithoutLocale}`;

        return (
          <Link
            key={locale}
            href={href}
            className={cn(
              'h-7 px-3 flex items-center justify-center text-xs font-semibold rounded-lg transition-all',
              isActive
                ? 'bg-surface text-ink shadow-xs dark:bg-zinc-800 dark:text-white'
                : 'text-muted hover:text-ink hover:bg-surface/50 dark:text-zinc-400 dark:hover:text-zinc-200 dark:hover:bg-zinc-800/50'
            )}
            aria-label={locale === 'en' ? 'Switch to English' : 'Switch to Arabic'}
            aria-current={isActive ? 'true' : undefined}
          >
            {locale.toUpperCase()}
          </Link>
        );
      })}
    </div>
  );
}

export default LanguageSwitcher;