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

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

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-sm border-b border-gray-800">
      <div className="container-custom">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="flex items-center">
            <a href="https://enterprise.nestjs.com/" className="flex items-center">
              <img 
                src="https://enterprise.nestjs.com/logo-small-gradient.76616405.svg" 
                alt="NestJS - A progressive Node.js framework" 
                className="h-8 w-auto"
              />
            </a>
          </div>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-8">
            <a href="#" className="text-white hover:text-brand-pink transition-colors font-medium">
              OUR WEBSITE
            </a>
            <a href="#" className="text-white hover:text-brand-pink transition-colors font-medium">
              COURSES
            </a>
            <div className="relative group">
              <button className="flex items-center text-white hover:text-brand-pink transition-colors font-medium">
                <span className="bg-brand-pink text-white text-xs px-2 py-1 rounded mr-2">NEW</span>
                RESOURCES
                <ChevronDown className="ml-1 h-4 w-4" />
              </button>
            </div>
          </nav>

          {/* Social Icons */}
          <div className="hidden md:flex items-center space-x-4">
            <a href="#" className="text-gray-400 hover:text-white transition-colors">
              <Github className="h-5 w-5" />
            </a>
            <a href="#" className="text-gray-400 hover:text-white transition-colors">
              <X className="h-5 w-5" />
            </a>
          </div>

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

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden bg-black border-t border-gray-800">
            <div className="px-2 pt-2 pb-3 space-y-1">
              <a href="#" className="block px-3 py-2 text-white hover:text-brand-pink transition-colors font-medium">
                OUR WEBSITE
              </a>
              <a href="#" className="block px-3 py-2 text-white hover:text-brand-pink transition-colors font-medium">
                COURSES
              </a>
              <a href="#" className="block px-3 py-2 text-white hover:text-brand-pink transition-colors font-medium">
                <span className="bg-brand-pink text-white text-xs px-2 py-1 rounded mr-2">NEW</span>
                RESOURCES
              </a>
            </div>
          </div>
        )}
      </div>
    </header>
  );
};

export default Header;