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/language';
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: '🇪🇸' },
  { code: 'pt', name: 'Portuguese', nativeName: 'Português', flag: '🇧🇷' },
  { code: 'fr', name: 'French', nativeName: 'Français', flag: '🇫🇷' },
  { code: 'de', name: 'German', nativeName: 'Deutsch', flag: '🇩🇪' },
  { code: 'it', name: 'Italian', nativeName: 'Italiano', flag: '🇮🇹' },
  { code: 'nl', name: 'Dutch', nativeName: 'Nederlands', flag: '🇳🇱' },
  { code: 'pl', name: 'Polish', nativeName: 'Polski', flag: '🇵🇱' },
  { code: 'ru', name: 'Russian', nativeName: 'Русский', flag: '🇷🇺' },
  { code: 'ko', name: 'Korean', nativeName: '한국어', flag: '🇰🇷' },
  { code: 'ko-KP', name: 'Korean (North)', nativeName: '조선어', flag: '🇰🇵' },
  { code: 'th', name: 'Thai', nativeName: 'ไทย', flag: '🇹🇭' },
  { code: 'ja', name: 'Japanese', nativeName: '日本語', flag: '🇯🇵' },
  { code: 'zh-CN', name: 'Chinese (Simplified)', nativeName: '简体中文', flag: '🇨🇳' },
  { code: 'zh-TW', name: 'Chinese (Traditional)', nativeName: '繁體中文', flag: '🇹🇼' },
  { code: 'uk', name: 'Ukrainian', nativeName: 'Українська', flag: '🇺🇦' },
  { code: 'id', name: 'Indonesian', nativeName: 'Bahasa Indonesia', flag: '🇮🇩' },
  { code: 'cs', name: 'Czech', nativeName: 'Čeština', flag: '🇨🇿' },
  { code: 'ro', name: 'Romanian', nativeName: 'Română', flag: '🇷🇴' },
  { code: 'sv', name: 'Swedish', nativeName: 'Svenska', flag: '🇸🇪' },
  { code: 'el', name: 'Greek', nativeName: 'Ελληνικά', flag: '🇬🇷' },
  { code: 'vi', name: 'Vietnamese', nativeName: 'Tiếng Việt', flag: '🇻🇳' },
  { code: 'tr', name: 'Turkish', nativeName: 'Türkçe', flag: '🇹🇷' },
];

interface LanguageToggleProps {
  /** Show only the flag icon (compact mode) */
  compact?: boolean;
  /**
   * Render the languages as an inline list instead of a dropdown. Use this
   * INSIDE a Radix Sheet/Dialog: a portaled DropdownMenu inherits the dialog's
   * `pointer-events: none` on <body> and its items become unclickable.
   */
  inline?: 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, inline = false, className, variant = 'ghost' }: LanguageToggleProps) {
  const { language, setLanguage } = useTranslation();

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

  if (inline) {
    return (
      <div className={cn('flex flex-col', className)}>
        {languages.map((lang) => (
          <button
            key={lang.code}
            type="button"
            onClick={() => setLanguage(lang.code)}
            className={cn(
              'flex items-center gap-3 rounded-xl px-4 py-3 text-left transition-all duration-200',
              language === lang.code
                ? 'bg-primary/10 text-primary'
                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
            )}
          >
            <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 opacity-70">{lang.name}</span>
              )}
            </div>
            {language === lang.code && <span className="ml-auto text-primary">✓</span>}
          </button>
        ))}
      </div>
    );
  }

  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>
  );
}