import React, { useState } from 'react';
import { Search, Menu, X, Github } from 'lucide-react';

function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <header className="fixed top-0 left-0 right-0 bg-white border-b border-react-border z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-react-blue rounded-full flex items-center justify-center">
                <div className="w-6 h-6 border-2 border-white rounded-full relative">
                  <div className="absolute inset-0 border-2 border-white rounded-full transform rotate-45"></div>
                  <div className="absolute inset-0 border-2 border-white rounded-full transform -rotate-45"></div>
                  <div className="absolute top-1/2 left-1/2 w-2 h-2 bg-white rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
                </div>
              </div>
              <span className="text-xl font-bold text-react-dark">React</span>
              <span className="text-sm text-react-gray bg-react-light-gray px-2 py-1 rounded">v19.2</span>
            </div>
          </div>

          {/* Search */}
          <div className="hidden md:flex items-center flex-1 max-w-md mx-8">
            <div className="relative w-full">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-react-gray w-4 h-4" />
              <input
                type="text"
                placeholder="Search"
                className="w-full pl-10 pr-12 py-2 border border-react-border rounded-lg focus:outline-none focus:ring-2 focus:ring-react-blue focus:border-transparent"
              />
              <div className="absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center space-x-1">
                <kbd className="px-2 py-1 text-xs bg-react-light-gray border border-react-border rounded">Ctrl</kbd>
                <kbd className="px-2 py-1 text-xs bg-react-light-gray border border-react-border rounded">K</kbd>
              </div>
            </div>
          </div>

          {/* Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            <a href="#" className="text-react-dark hover:text-react-blue font-medium">Learn</a>
            <a href="#" className="text-react-dark hover:text-react-blue font-medium">Reference</a>
            <a href="#" className="text-react-dark hover:text-react-blue font-medium">Community</a>
            <a href="#" className="text-react-dark hover:text-react-blue font-medium">Blog</a>
            <Github className="w-5 h-5 text-react-gray hover:text-react-dark cursor-pointer" />
          </nav>

          {/* Mobile menu button */}
          <button
            className="md:hidden p-2"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
      </div>

      {/* Mobile menu */}
      {isMenuOpen && (
        <div className="md:hidden bg-white border-t border-react-border">
          <div className="px-4 py-2 space-y-2">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-react-gray w-4 h-4" />
              <input
                type="text"
                placeholder="Search"
                className="w-full pl-10 pr-4 py-2 border border-react-border rounded-lg focus:outline-none focus:ring-2 focus:ring-react-blue focus:border-transparent"
              />
            </div>
            <a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Learn</a>
            <a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Reference</a>
            <a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Community</a>
            <a href="#" className="block py-2 text-react-dark hover:text-react-blue font-medium">Blog</a>
          </div>
        </div>
      )}
    </header>
  );
}

export default Header;