'use client';

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

export default function SimpleLanguageSelector() {
  const { language, setLanguage } = useLanguage();
  
  const worlds = [
    {
      language: 'en' as const,
      name: 'English',
      flag: USFlag
    },
    {
      language: 'de' as const,
      name: 'Deutsch',
      flag: GermanFlag
    }
  ];

  return (
    <div className="fixed top-4 right-4 z-50 flex space-x-2">
      {worlds.map((world) => (
        <button
          key={world.language}
          onClick={() => setLanguage(world.language)}
          className={`flex items-center space-x-2 px-3 py-2 rounded-full transition-all duration-300 transform hover:scale-105 border-2 ${
            language === world.language 
              ? 'bg-amber-500 text-white shadow-lg scale-105 border-amber-300' 
              : 'bg-white/20 text-white hover:bg-white/30 border-white/30'
          }`}
        >
          <world.flag className="w-6 h-4" />
          <span className="font-medium text-sm">{world.name}</span>
        </button>
      ))}
    </div>
  );
}
