SkateSpots/src/components/LanguageToggle.tsx

import { Languages } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useTranslation, type Language } from '@/contexts/LanguageContext';
import { cn } from '@/lib/utils';

interface LanguageOption {
  code: Language;
  name: string;
  nativeName: string;
  flag: string;
}

const languages: LanguageOption[] = [
  { code: 'en', name: 'English', nativeName: 'English', flag: '🇬🇧' },
  { code: 'es', name: 'Spanish', nativeName: 'Español', flag: '🇪🇸' },
];

interface LanguageToggleProps {
  /** Show only the flag icon (compact mode) */
  compact?: boolean;
  /** Additional class names */
  className?: string;
  /** Variant style */
  variant?: 'default' | 'outline' | 'ghost';
}

/**
 * Language toggle dropdown for switching between English and Spanish
 */
export function LanguageToggle({ compact = false, className, variant = 'ghost' }: LanguageToggleProps) {
  const { language, setLanguage, t } = useTranslation();

  const currentLanguage = languages.find(l => l.code === language) || languages[0];

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant={variant}
          size={compact ? 'icon' : 'default'}
          className={cn(
            'gap-2',
            compact ? 'w-10 h-10' : 'px-3',
            className
          )}
        >
          <span className="text-lg">{currentLanguage.flag}</span>
          {!compact && (
            <>
              <span className="hidden sm:inline">{currentLanguage.nativeName}</span>
              <Languages className="h-4 w-4 sm:hidden" />
            </>
          )}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        {languages.map((lang) => (
          <DropdownMenuItem
            key={lang.code}
            onClick={() => setLanguage(lang.code)}
            className={cn(
              'flex items-center gap-3 cursor-pointer',
              language === lang.code && 'bg-primary/10 text-primary'
            )}
          >
            <span className="text-lg">{lang.flag}</span>
            <div className="flex flex-col">
              <span className="font-medium">{lang.nativeName}</span>
              {lang.nativeName !== lang.name && (
                <span className="text-xs text-muted-foreground">{lang.name}</span>
              )}
            </div>
            {language === lang.code && (
              <span className="ml-auto text-primary">✓</span>
            )}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

/**
 * Simple language selector for settings page
 */
export function LanguageSelector() {
  const { language, setLanguage, t } = useTranslation();

  return (
    <div className="space-y-3">
      <label className="text-sm font-medium">{t('settings.selectLanguage')}</label>
      <div className="grid grid-cols-2 gap-3">
        {languages.map((lang) => (
          <button
            key={lang.code}
            onClick={() => setLanguage(lang.code)}
            className={cn(
              'flex items-center gap-3 p-4 rounded-xl border-2 transition-all',
              language === lang.code
                ? 'border-primary bg-primary/10 shadow-lg shadow-primary/20'
                : 'border-border hover:border-primary/50 hover:bg-muted/50'
            )}
          >
            <span className="text-2xl">{lang.flag}</span>
            <div className="text-left">
              <div className="font-bold">{lang.nativeName}</div>
              {lang.nativeName !== lang.name && (
                <div className="text-xs text-muted-foreground">{lang.name}</div>
              )}
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}