'use client';

import { useLanguage } from './LanguageProvider';

export default function AstronautBuddy() {
  const { language } = useLanguage();
  
  const messages = {
    en: {
      greeting: "Hello, Explorer!",
      mission: "Ready to learn something amazing?",
      tip: "Ask me about science, history, art, nature, math - anything!",
      rank: "AI Assistant"
    },
    de: {
      greeting: "Hallo, Entdecker!",
      mission: "Bereit, etwas Erstaunliches zu lernen?",
      tip: "Frag mich über Wissenschaft, Geschichte, Kunst, Natur, Mathe - alles!",
      rank: "KI-Assistent"
    }
  };

  return (
    <div className="bg-gradient-to-br from-indigo-600 via-purple-700 to-pink-600 rounded-3xl p-6 border-4 border-cyan-300 shadow-2xl h-full flex flex-col items-center justify-center text-white relative overflow-hidden">
      
      {/* Astronaut character */}
      <div className="relative mb-6">
        <div className="text-8xl animate-float-space mb-4">🚀</div>
        <div className="absolute -top-2 -right-2 text-3xl animate-twinkle">✨</div>
        <div className="absolute -bottom-2 -left-2 text-2xl animate-twinkle" style={{ animationDelay: '1s' }}>⭐</div>
      </div>
      
      {/* Astronaut info */}
      <div className="text-center space-y-4">
        <div className="bg-black/30 rounded-2xl p-4 border-2 border-cyan-300">
          <h3 className="text-xl font-bold text-cyan-300 mb-2">{messages[language].rank}</h3>
          <p className="text-lg font-semibold">{messages[language].greeting}</p>
        </div>
        
        <div className="bg-black/20 rounded-xl p-3 border border-purple-300">
          <p className="text-purple-200 font-medium">{messages[language].mission}</p>
        </div>
        
        <div className="bg-black/20 rounded-xl p-3 border border-pink-300">
          <p className="text-pink-200 text-sm">{messages[language].tip}</p>
        </div>
      </div>
      
      {/* Mission badges */}
      <div className="absolute top-4 right-4 flex flex-col space-y-2">
        <div className="bg-yellow-500 text-black rounded-full w-8 h-8 flex items-center justify-center text-xs font-bold animate-pulse">⚡</div>
        <div className="bg-green-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-xs font-bold animate-pulse" style={{ animationDelay: '0.5s' }}>🌟</div>
        <div className="bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center text-xs font-bold animate-pulse" style={{ animationDelay: '1s' }}>🚀</div>
      </div>
      
      {/* Background space elements */}
      <div className="absolute top-2 left-2 text-xl opacity-50 animate-twinkle">🌙</div>
      <div className="absolute bottom-4 right-8 text-lg opacity-50 animate-twinkle" style={{ animationDelay: '2s' }}>🪐</div>
      <div className="absolute top-1/2 left-2 text-sm opacity-30 animate-twinkle" style={{ animationDelay: '1.5s' }}>☄️</div>
    </div>
  );
}
