Dep upd

app/components/LanguageToggle.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { Link } from '../../i18n/routing';
+import { GlobeAltIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+
+type Locale = 'en' | 'de' | 'ru' | 'ka' | 'ar';
+
+interface LanguageOption {
+  code: Locale;
+  name: string;
+}
+
+export function LanguageToggle() {
+  const locale = useLocale() as Locale;
+  const t = useTranslations('ui');
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const locales: Locale[] = ['en', 'de', 'ru', 'ka', 'ar'];
+
+  const languageOptions: LanguageOption[] = locales.map((code) => ({
+    code,
+    name: t(`languages.${code}`)
+  }));
+
+  const currentLanguage = languageOptions.find(lang => lang.code === locale) || languageOptions[0];
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={toggleDropdown}
+        className="flex items-center gap-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors"
+        aria-label={t('languageSelector')}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <GlobeAltIcon className="w-4 h-4 text-gray-700 dark:text-gray-300" />
+        <span className="text-sm text-gray-700 dark:text-gray-300 min-w-[60px] text-left hidden min-[360px]:block">
+          {currentLanguage.name}
+        </span>
+        <ChevronDownIcon
+          className={`w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+          <div className="py-1">
+            {languageOptions.map((option) => (
+              <Link
+                key={option.code}
+                href="/"
+                locale={option.code}
+                onClick={() => setIsOpen(false)}
+                className={`w-full flex items-center gap-3 px-3 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
+                  locale === option.code
+                    ? 'bg-gray-100 dark:bg-gray-700 text-blue-600 dark:text-blue-400'
+                    : 'text-gray-700 dark:text-gray-300'
+                }`}
+                role="menuitem"
+              >
+                <GlobeAltIcon className={`w-4 h-4 ${
+                  locale === option.code ? 'text-blue-600 dark:text-blue-400' : 'text-gray-500 dark:text-gray-400'
+                }`} />
+                <span>{option.name}</span>
+                {locale === option.code && (
+                  <div className="ml-auto w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full"></div>
+                )}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/components/PremiumCheckout.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams } from 'next/navigation';
+import { appConfig } from '../config/app';
+import { SkinId } from '../types';
+import { useLocalizedSkinName } from '../hooks/useLocalizedSkinName';
+import { usePrices } from '../hooks/usePrices';
+import { useFeature } from '../providers/FeatureProvider';
+
+interface PremiumCheckoutProps {
+  skinId: SkinId;
+  onClose: () => void;
+}
+
+export function PremiumCheckout({ skinId, onClose }: PremiumCheckoutProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const params = useParams();
+  const getLocalizedSkinName = useLocalizedSkinName();
+  const paymentsEnabled = useFeature('paymentsEnabled');
+  const { getPrice, loading: pricesLoading } = usePrices();
+
+  const skin = appConfig.skins[skinId];
+  const skinName = getLocalizedSkinName(skinId);
+  const price = getPrice(skinId);
+  const locale = params.locale as string;
+
+  // Guard: never render if payments are disabled or skin is not premium
+  if (!paymentsEnabled || !skin?.isPremium) {
+    return null;
+  }
+
+  const handlePurchase = async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch('/api/checkout', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ skinId, locale }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Failed to create checkout');
+      }
+
+      // Redirect to Lemon Squeezy checkout
+      if (data.checkoutUrl) {
+        window.location.href = data.checkoutUrl;
+      } else {
+        throw new Error('No checkout URL received');
+      }
+    } catch (err) {
+      console.error('Checkout error:', err);
+      setError(err instanceof Error ? err.message : 'An error occurred');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+            Premium Skin
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            disabled={isLoading}
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="text-center mb-6">
+          <div className="w-24 h-24 mx-auto mb-4 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+            <img
+              src={skin.normal}
+              alt={skinName}
+              className="w-16 h-16"
+            />
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+            {skinName}
+          </h3>
+          <p className="text-gray-600 dark:text-gray-300 mb-4">
+            Unlock this premium skin to customize your experience!
+          </p>
+          <div className="text-2xl font-bold text-green-600 dark:text-green-400">
+            {pricesLoading ? '...' : (price ?? '')}
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-100 dark:bg-red-900 border border-red-300 dark:border-red-700 rounded-md">
+            <p className="text-red-700 dark:text-red-300 text-sm">{error}</p>
+          </div>
+        )}
+
+        <div className="flex gap-3">
+          <button
+            onClick={onClose}
+            className="flex-1 px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+            disabled={isLoading}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handlePurchase}
+            disabled={isLoading}
+            className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+          >
+            {isLoading ? (
+              <>
+                <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Processing...
+              </>
+            ) : (
+              'Purchase'
+            )}
+          </button>
+        </div>
+
+        <p className="text-xs text-gray-500 dark:text-gray-400 text-center mt-4">
+          Secure payment powered by Lemon Squeezy
+        </p>
+      </div>
+    </div>
+  );
+}

app/components/SkinSelector.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+import { appConfig } from '../config/app';
+import { SkinId } from '../types';
+import { useLocalizedSkinName } from '../hooks/useLocalizedSkinName';
+import { usePrices } from '../hooks/usePrices';
+import { useFeature } from '../providers/FeatureProvider';
+import { ChevronDownIcon, LockClosedIcon } from '@heroicons/react/24/outline';
+import { PremiumCheckout } from './PremiumCheckout';
+
+interface SkinOption {
+  id: SkinId;
+  name: string;
+  image: string;
+}
+
+export function SkinSelector() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const getLocalizedSkinName = useLocalizedSkinName();
+  const paymentsEnabled = useFeature('paymentsEnabled');
+  const { getPrice, loading: pricesLoading } = usePrices();
+  const [isOpen, setIsOpen] = useState(false);
+  const [showCheckout, setShowCheckout] = useState<SkinId | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // When payments are disabled, filter out premium skins entirely
+  const skinOptions: SkinOption[] = Object.entries(appConfig.skins)
+    .filter(([, skin]) => paymentsEnabled || !skin.isPremium)
+    .map(([id, skin]) => ({
+      id: id as SkinId,
+      name: getLocalizedSkinName(id),
+      image: skin.normal
+    }));
+
+  const skinParam = searchParams.get('skin');
+  
+  // Validate that the skin exists in our config
+  const isValidSkin = skinParam && Object.keys(appConfig.skins).includes(skinParam);
+  
+  // Use the skin from URL if valid, otherwise use default skin
+  const currentSkin = (isValidSkin ? skinParam : appConfig.defaultSkin) as SkinId;
+  const currentSkinOption = skinOptions.find(skin => skin.id === currentSkin) || skinOptions[0];
+
+  const handleSkinChange = useCallback((newSkin: SkinId) => {
+    const skin = appConfig.skins[newSkin];
+    
+    // If it's a premium skin, show checkout modal
+    if (skin.isPremium) {
+      setShowCheckout(newSkin);
+      setIsOpen(false);
+      return;
+    }
+
+    // For free skins, change immediately
+    const params = new URLSearchParams(searchParams.toString());
+    
+    if (newSkin === appConfig.defaultSkin) {
+      params.delete('skin');
+    } else {
+      params.set('skin', newSkin);
+    }
+
+    const newUrl = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
+    router.push(newUrl);
+    setIsOpen(false);
+  }, [router, searchParams]);
+
+  const handleCheckoutClose = useCallback(() => {
+    setShowCheckout(null);
+  }, []);
+
+  // Handle clicking outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Handle escape key to close dropdown
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Main toggle button */}
+      <button
+        onClick={toggleDropdown}
+        className="flex items-center gap-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors"
+        aria-label="Skin selector"
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <Image
+          src={currentSkinOption.image}
+          alt={currentSkinOption.name}
+          width={16}
+          height={16}
+          className="rounded"
+        />
+        <span className="text-sm text-gray-700 dark:text-gray-300 min-w-[60px] text-left hidden min-[360px]:block">
+          {currentSkinOption.name}
+        </span>
+        <ChevronDownIcon
+          className={`w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {/* Dropdown menu */}
+      {isOpen && (
+        <div className="absolute left-0 mt-2 w-36 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+          <div className="py-1">
+            {skinOptions.map((option) => {
+              const skin = appConfig.skins[option.id];
+              const isPremium = skin.isPremium;
+              
+              return (
+                <button
+                  key={option.id}
+                  onClick={() => handleSkinChange(option.id)}
+                  className={`w-full flex items-center gap-3 px-3 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
+                    currentSkin === option.id
+                      ? 'bg-gray-100 dark:bg-gray-700 text-blue-600 dark:text-blue-400'
+                      : 'text-gray-700 dark:text-gray-300'
+                  }`}
+                  role="menuitem"
+                >
+                  <div className="relative">
+                    <Image
+                      src={option.image}
+                      alt={option.name}
+                      width={16}
+                      height={16}
+                      className="rounded"
+                    />
+                    {isPremium && (
+                      <LockClosedIcon className="absolute -top-1 -right-1 w-3 h-3 text-yellow-500" />
+                    )}
+                  </div>
+                  <span className="flex-1">{option.name}</span>
+                  {isPremium && paymentsEnabled && (
+                    <span className="text-xs text-yellow-600 dark:text-yellow-400 font-medium">
+                      {pricesLoading ? '...' : (getPrice(option.id) ?? '')}
+                    </span>
+                  )}
+                  {currentSkin === option.id && (
+                    <div className="w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full"></div>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Premium Checkout Modal */}
+      {showCheckout && (
+        <PremiumCheckout
+          skinId={showCheckout}
+          onClose={handleCheckoutClose}
+        />
+      )}
+    </div>
+  );
+}

app/components/SpeechBubble.tsx

@@ -1,83 +1,118 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
-import { frogMessages } from '../config/messages';
+import { useMessages } from 'next-intl';
+import { getRandomEmoji } from '../config/emojis';
 
-// Increase visibility duration for speech bubbles
-const VISIBILITY_MS = 3000; // 3 seconds for message visibility
-const COOLDOWN_MS = 2000;   // 2 seconds between new messages
+const VISIBILITY_MS = 3000;
+const COOLDOWN_MS = 2000;
 
 interface SpeechBubbleProps {
   isShaken: boolean;
   triggerCount: number;
 }
 
-export function SpeechBubble({ isShaken, triggerCount }: SpeechBubbleProps) {
+export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
   const [message, setMessage] = useState('');
   const [isVisible, setIsVisible] = useState(false);
+  const [messageQueue, setMessageQueue] = useState<string[]>([]);
+  const allMessages = useMessages();
+  const messagesRef = useRef<string[]>([]);
   const lastTriggerTime = useRef(0);
   const showTimeRef = useRef<number>(0);
+  const lastFadeTime = useRef(0);
+  
+  useEffect(() => {
+    if (messagesRef.current.length > 0) return;
+    
+    try {
+      const characterMessages = allMessages.character;
+      
+      if (characterMessages && typeof characterMessages === 'object') {
+        const messageArray = Object.values(characterMessages) as string[];
+        
+        if (messageArray.length === 0) {
+          console.error(`No character messages found! Expected messages in 'character' namespace but got none.`);
+          return;
+        }
+        
+        console.log(`Loaded ${messageArray.length} character messages`);
+        messagesRef.current = messageArray;
+      } else {
+        console.error(`Character messages not found or invalid format:`, characterMessages);
+      }
+    } catch (error) {
+      console.error(`Error loading character messages:`, error);
+    }
+  }, [allMessages]);
+
   const getRandomMessage = useCallback(() => {
-    const randomIndex = Math.floor(Math.random() * frogMessages.length);
-    return frogMessages[randomIndex];
+    const currentMessages = messagesRef.current;
+    if (currentMessages.length === 0) return '';
+    const randomIndex = Math.floor(Math.random() * currentMessages.length);
+    const messageValue = currentMessages[randomIndex];
+    return `${messageValue} ${getRandomEmoji()}`;
   }, []);
 
-  // Handle showing new messages
   useEffect(() => {
-    if (triggerCount === 0) return; // Skip initial mount
+    if (triggerCount === 0 || messagesRef.current.length === 0) return;
     
     const now = Date.now();
-    const timeSinceLastMessage = now - lastTriggerTime.current;
+    const timeSinceLastFade = now - lastFadeTime.current;
 
-    // Show new message if cooldown has expired
-    if (timeSinceLastMessage >= COOLDOWN_MS) {
-      lastTriggerTime.current = now;
-      showTimeRef.current = now;
+    if (timeSinceLastFade < COOLDOWN_MS || isVisible) {
       const newMessage = getRandomMessage();
+      if (newMessage) {
+        setMessageQueue(prev => [...prev, newMessage]);
+      }
+      return;
+    }
+
+    lastTriggerTime.current = now;
+    showTimeRef.current = now;
+    const newMessage = getRandomMessage();
+    if (newMessage) {
       setMessage(newMessage);
       setIsVisible(true);
     }
-  }, [triggerCount, getRandomMessage]);
+  }, [triggerCount, isVisible, getRandomMessage]);
+
+  useEffect(() => {
+    if (messageQueue.length === 0 || isVisible) return;
+
+    const now = Date.now();
+    const timeSinceLastFade = now - lastFadeTime.current;
+
+    if (timeSinceLastFade >= COOLDOWN_MS) {
+      const nextMessage = messageQueue[0];
+      setMessageQueue(prev => prev.slice(1));
+      lastTriggerTime.current = now;
+      showTimeRef.current = now;
+      setMessage(nextMessage);
+      setIsVisible(true);
+    }
+  }, [messageQueue, isVisible]);
 
-  // Handle visibility duration
   useEffect(() => {
     if (!isVisible) return;
 
-    const checkVisibility = setInterval(() => {
-      const now = Date.now();
-      const timeVisible = now - showTimeRef.current;
-      
-      if (timeVisible >= VISIBILITY_MS) {
-        setIsVisible(false);
-      }
-    }, 100); // Check every 100ms
+    const hideTimer = setTimeout(() => {
+      setIsVisible(false);
+      lastFadeTime.current = Date.now();
+    }, VISIBILITY_MS);
 
-    return () => {
-      clearInterval(checkVisibility);
-    };
+    return () => clearTimeout(hideTimer);
   }, [isVisible]);
-  
-  // Uncomment and modify the useEffect to control visibility based on isShaken prop
-  // This will make the speech bubble stay visible even after shaking stops
-  useEffect(() => {
-    if (!isShaken) {
-      // Don't hide the speech bubble when shaking stops
-      // The visibility duration timer will handle hiding it
-      return;
-    }
-  }, [isShaken]);
-
-  if (!isVisible) return null;
 
   return (
-    <div className="absolute -top-24 left-1/2 -translate-x-1/2 bg-white dark:bg-slate-800 px-4 py-2 rounded-xl shadow-lg animate-float z-20">
-      <div className="relative">
-        {message}
-        {/* Triangle pointer */}
-        <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 w-0 h-0 
-                      border-l-[8px] border-l-transparent
-                      border-r-[8px] border-r-transparent
-                      border-t-[8px] border-t-white
-                      dark:border-t-slate-800" />
-      </div>
+    <div
+      className={`absolute -top-24 bg-white dark:bg-slate-800
+                  px-4 py-2 rounded-xl shadow-lg z-20 transition-opacity duration-300
+                  ${isVisible ? 'opacity-100 animate-float' : 'opacity-0 pointer-events-none'}`}
+      style={{
+        left: '50%',
+        transform: 'translateX(-50%)'
+      }}
+    >
+      {message}
     </div>
   );
 }

app/components/ThemeToggle.tsx

@@ -1,22 +1,138 @@
 'use client';
 
+import { useState, useRef, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
 import { useTheme } from '../providers/ThemeProvider';
-import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
+import { SunIcon, MoonIcon, ComputerDesktopIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+
+type ThemeMode = 'light' | 'dark' | 'system';
+
+interface ThemeOption {
+  mode: ThemeMode;
+  label: string;
+  icon: React.ReactNode;
+}
 
 export function ThemeToggle() {
-  const { darkMode, toggleDarkMode } = useTheme();
+  const { themeMode, setThemeMode } = useTheme();
+  const t = useTranslations('ui');
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const themeOptions: ThemeOption[] = [
+    {
+      mode: 'light',
+      label: t('themes.light'),
+      icon: <SunIcon className="w-4 h-4" />
+    },
+    {
+      mode: 'dark',
+      label: t('themes.dark'),
+      icon: <MoonIcon className="w-4 h-4" />
+    },
+    {
+      mode: 'system',
+      label: t('themes.system'),
+      icon: <ComputerDesktopIcon className="w-4 h-4" />
+    }
+  ];
+
+  // Get current theme option
+  const currentTheme = themeOptions.find(option => option.mode === themeMode) || themeOptions[2];
+
+  // Handle clicking outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Handle escape key to close dropdown
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  const handleThemeSelect = (mode: ThemeMode) => {
+    setThemeMode(mode);
+    setIsOpen(false);
+  };
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
 
   return (
-    <button
-      onClick={toggleDarkMode}
-      className="fixed top-4 right-4 p-2 rounded-full bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors z-50"
-      aria-label="Toggle dark mode"
-    >
-      {darkMode ? (
-        <SunIcon className="w-6 h-6 text-yellow-500" />
-      ) : (
-        <MoonIcon className="w-6 h-6 text-gray-900" />
+    <div className="relative" ref={dropdownRef}>
+      {/* Main toggle button */}
+      <button
+        onClick={toggleDropdown}
+        className="flex items-center gap-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors z-50"
+        aria-label={t('themeSelector')}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <div className="flex items-center text-gray-700 dark:text-gray-300">
+          {currentTheme.icon}
+        </div>
+        <span className="text-sm text-gray-700 dark:text-gray-300 min-w-[60px] text-left hidden min-[360px]:block">
+          {currentTheme.label}
+        </span>
+        <ChevronDownIcon
+          className={`w-4 h-4 text-gray-500 dark:text-gray-400 transition-transform ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {/* Dropdown menu */}
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-32 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+          <div className="py-1">
+            {themeOptions.map((option) => (
+              <button
+                key={option.mode}
+                onClick={() => handleThemeSelect(option.mode)}
+                className={`w-full flex items-center gap-3 px-3 py-2 text-sm text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors ${
+                  themeMode === option.mode
+                    ? 'bg-gray-100 dark:bg-gray-700 text-blue-600 dark:text-blue-400'
+                    : 'text-gray-700 dark:text-gray-300'
+                }`}
+                role="menuitem"
+              >
+                <div className={themeMode === option.mode ? 'text-blue-600 dark:text-blue-400' : ''}>
+                  {option.icon}
+                </div>
+                <span>{option.label}</span>
+                {themeMode === option.mode && (
+                  <div className="ml-auto w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full"></div>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
       )}
-    </button>
+    </div>
   );
 }