import React, { useState } from 'react';
import { Search, BookOpen, Compass, Sparkles, Wand2, Globe, Settings } from 'lucide-react';
import AIConfigModal from './AIConfigModal';

interface HeaderProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
}

const Header: React.FC<HeaderProps> = ({ activeTab, onTabChange }) => {
  const [showAIConfig, setShowAIConfig] = useState(false);

  const tabs = [
    { id: 'search', label: 'Search', icon: Search },
    { id: 'explore', label: 'Explore', icon: Compass },
    { id: 'study', label: 'Study Plans', icon: BookOpen },
    { id: 'ai-generator', label: 'AI Generator', icon: Sparkles },
    { id: 'transformer', label: 'Transform', icon: Wand2 },
    { id: 'multilingual', label: 'Multilingual', icon: Globe },
  ];

  return (
    <>
      <header className="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center space-x-4">
              <div className="flex items-center space-x-2">
                <div className="w-8 h-8 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-lg flex items-center justify-center">
                  <BookOpen className="w-5 h-5 text-white" />
                </div>
                <h1 className="text-xl font-bold text-gray-900">Wikistro</h1>
              </div>
              <div className="hidden sm:block">
                <p className="text-sm text-gray-600">Transform Knowledge into Learning</p>
              </div>
            </div>

            <nav className="flex items-center space-x-1">
              <div className="flex space-x-1 overflow-x-auto">
                {tabs.map((tab) => {
                  const Icon = tab.icon;
                  return (
                    <button
                      key={tab.id}
                      onClick={() => onTabChange(tab.id)}
                      className={`flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 whitespace-nowrap ${
                        activeTab === tab.id
                          ? 'bg-primary-50 text-primary-700 shadow-sm'
                          : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
                      }`}
                    >
                      <Icon className="w-4 h-4" />
                      <span className="hidden sm:inline">{tab.label}</span>
                    </button>
                  );
                })}
              </div>
              
              <div className="ml-2 pl-2 border-l border-gray-200">
                <button
                  onClick={() => setShowAIConfig(true)}
                  className="flex items-center space-x-2 px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-all duration-200"
                  title="AI Configuration"
                >
                  <Settings className="w-4 h-4" />
                  <span className="hidden sm:inline text-sm font-medium">AI Config</span>
                </button>
              </div>
            </nav>
          </div>
        </div>
      </header>

      <AIConfigModal 
        isOpen={showAIConfig} 
        onClose={() => setShowAIConfig(false)} 
      />
    </>
  );
};

export default Header;