'use client';

import { useLanguage } from './LanguageProvider';

export default function ToolsPanel() {
  const { language } = useLanguage();
  
  const tools = {
    en: [
      { icon: "🔬", name: "Science Lab", description: "Explore experiments" },
      { icon: "📚", name: "History Time", description: "Journey through time" },
      { icon: "�", name: "Art Studio", description: "Creative expression" },
      { icon: "🔢", name: "Math Helper", description: "Numbers & logic" },
      { icon: "🌍", name: "Geography", description: "Explore the world" },
      { icon: "🎵", name: "Music Corner", description: "Sounds & rhythms" },
      { icon: "⚽", name: "Sports Zone", description: "Games & activities" },
      { icon: "🌺", name: "Nature Guide", description: "Plants & animals" }
    ],
    de: [
      { icon: "🔬", name: "Wissenschaftslabor", description: "Experimente erforschen" },
      { icon: "📚", name: "Geschichte", description: "Reise durch die Zeit" },
      { icon: "🎨", name: "Kunstatelier", description: "Kreative Ausdrücke" },
      { icon: "🔢", name: "Mathe-Helfer", description: "Zahlen & Logik" },
      { icon: "�", name: "Geografie", description: "Die Welt erkunden" },
      { icon: "🎵", name: "Musik-Ecke", description: "Klänge & Rhythmen" },
      { icon: "⚽", name: "Sport-Zone", description: "Spiele & Aktivitäten" },
      { icon: "🌺", name: "Natur-Führer", description: "Pflanzen & Tiere" }
    ]
  };

  const headers = {
    en: {
      title: "Learning Tools",
      subtitle: "Explore Topics"
    },
    de: {
      title: "Lern-Werkzeuge",
      subtitle: "Themen erkunden"
    }
  };

  return (
    <div className="bg-gradient-to-b from-slate-800 via-gray-800 to-slate-900 rounded-3xl p-6 border-4 border-emerald-400 shadow-2xl h-full">
      
      {/* Toolbar header */}
      <div className="text-center mb-6">
        <h3 className="text-2xl font-bold text-emerald-300 mb-2 animate-pulse-rainbow">
          {headers[language].title}
        </h3>
        <p className="text-emerald-200 text-sm">{headers[language].subtitle}</p>
      </div>
      
      {/* Tool buttons */}
      <div className="space-y-4 overflow-y-auto max-h-[600px]">
        {tools[language].map((tool, index) => (
          <button
            key={index}
            className="w-full bg-gradient-to-r from-emerald-600/30 to-teal-600/30 hover:from-emerald-500/50 hover:to-teal-500/50 border-2 border-emerald-500 hover:border-emerald-400 rounded-2xl p-4 transition-all duration-300 transform hover:scale-105 group"
          >
            <div className="flex items-center space-x-3">
              <div className="text-3xl group-hover:scale-110 transition-transform">
                {tool.icon}
              </div>
              <div className="text-left flex-1">
                <h4 className="text-emerald-300 font-bold text-sm group-hover:text-emerald-200">
                  {tool.name}
                </h4>
                <p className="text-emerald-400 text-xs group-hover:text-emerald-300">
                  {tool.description}
                </p>
              </div>
            </div>
            
            {/* Tool activation indicator */}
            <div className="mt-2 w-full h-1 bg-emerald-900 rounded-full overflow-hidden">
              <div className="h-full bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500"></div>
            </div>
          </button>
        ))}
      </div>
      
      {/* Toolbar status */}
      <div className="mt-6 pt-4 border-t border-emerald-600">
        <div className="flex justify-between items-center text-xs">
          <div className="flex items-center space-x-1">
            <div className="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></div>
            <span className="text-emerald-300">All Topics Ready</span>
          </div>
          <div className="text-emerald-400">
            {tools[language].length} Tools Active
          </div>
        </div>
      </div>
      
      {/* Background decorations */}
      <div className="absolute top-4 right-4 text-emerald-400 opacity-30 animate-sparkle">⚡</div>
      <div className="absolute bottom-8 left-4 text-emerald-500 opacity-20 animate-sparkle" style={{ animationDelay: '1s' }}>🔧</div>
    </div>
  );
}
