'use client';

import { useLanguage } from './LanguageProvider';
import { USFlag, GermanFlag } from './Flags';

export default function WorldSelector() {
  const { language, setLanguage } = useLanguage();
  
  const worlds = [
    {
      language: 'en' as const,
      name: 'English World',
      emoji: '🌍',
      flag: USFlag,
      color: 'from-blue-500 to-green-500',
      position: 'top-20 right-20'
    },
    {
      language: 'de' as const,
      name: 'Deutsche Welt',
      emoji: '🇩🇪',
      flag: GermanFlag,
      color: 'from-red-500 to-yellow-500',
      position: 'top-40 right-40'
    }
  ];

  return (
    <div className="fixed z-50">
      {worlds.map((world) => (
        <div
          key={world.language}
          className={`absolute ${world.position} cursor-pointer group`}
          onClick={() => setLanguage(world.language)}
        >
          {/* World button */}
          <div className={`w-16 h-16 bg-gradient-to-br ${world.color} rounded-full border-4 ${language === world.language ? 'border-white' : 'border-amber-300'} shadow-2xl transform transition-all duration-300 hover:scale-110 group-hover:shadow-amber-400/50 animate-float-magic`}>
            
            {/* World surface */}
            <div className="w-full h-full rounded-full flex items-center justify-center relative overflow-hidden">
              
              {/* Flag component */}
              <div className="absolute inset-2 rounded-full overflow-hidden border border-white/50">
                <world.flag className="w-full h-full object-cover" />
              </div>
              
              {/* Glow effect for active world */}
              {language === world.language && (
                <div className="absolute inset-0 rounded-full animate-pulse-rainbow"></div>
              )}
            </div>
            
            {/* World ring (for active language) */}
            {language === world.language && (
              <div className="absolute inset-0 rounded-full border-2 border-amber-300 animate-pulse transform scale-125"></div>
            )}
          </div>
          
          {/* World label */}
          <div className="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
            <div className="bg-black/80 text-white px-3 py-1 rounded-lg text-sm font-bold border border-amber-300">
              {world.name}
            </div>
          </div>
          
          {/* Magic trail */}
          <div className="absolute inset-0 rounded-full border border-amber-300/20 transform scale-150 animate-pulse"></div>
        </div>
      ))}
      
      {/* Central learning star */}
      <div className="fixed top-12 right-12 w-8 h-8 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full animate-sparkle border-2 border-white shadow-lg">
        <div className="w-full h-full rounded-full bg-gradient-to-br from-yellow-200 to-amber-400 animate-pulse flex items-center justify-center text-xs">
          🌟
        </div>
      </div>
      
      {/* Instructions */}
      <div className="fixed top-32 right-8 bg-black/70 text-amber-300 px-3 py-2 rounded-lg text-xs font-medium border border-amber-400">
        Choose your language! �️
      </div>
    </div>
  );
}
