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

const Header = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  const toggleMobileMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-90 backdrop-blur-sm">
      {/* Top bar */}
      <div className="bg-gray-800 text-white text-sm py-2">
        <div className="container-max flex justify-between items-center">
          <div className="flex items-center space-x-4">
            <div className="flex items-center space-x-1">
              <MapPin className="w-4 h-4" />
              <span>Dealer search</span>
            </div>
            <div className="flex items-center space-x-1">
              <User className="w-4 h-4" />
              <span>About us</span>
            </div>
          </div>
          <div className="hidden md:block">
            <span>Premium E-Bikes & Mountain Bikes</span>
          </div>
        </div>
      </div>

      {/* Main navigation */}
      <nav className="py-4">
        <div className="container-max flex items-center justify-between">
          {/* Logo */}
          <div className="flex items-center">
            <div className="text-white text-2xl font-bold">
              <span className="bg-white text-black px-2 py-1 mr-1 transform -skew-x-12">BULLS</span>
            </div>
          </div>

          {/* Desktop Navigation */}
          <div className="hidden lg:flex items-center space-x-8">
            <div className="nav-link cursor-pointer">E-BIKES</div>
            <div className="nav-link cursor-pointer">BIKES</div>
            <div className="nav-link cursor-pointer">SERVICE</div>
          </div>

          {/* Right side icons */}
          <div className="flex items-center space-x-4">
            <Search className="w-6 h-6 text-white cursor-pointer hover:text-bulls-blue transition-colors" />
            <div className="w-6 h-6 text-white cursor-pointer hover:text-bulls-blue transition-colors">
              <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
              </svg>
            </div>
            
            {/* Mobile menu button */}
            <button 
              className="lg:hidden text-white"
              onClick={toggleMobileMenu}
            >
              {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>

        {/* Mobile Navigation */}
        {isMobileMenuOpen && (
          <div className="lg:hidden bg-black bg-opacity-95 mt-4">
            <div className="container-max py-4 space-y-4">
              <div className="nav-link cursor-pointer block py-2">E-BIKES</div>
              <div className="nav-link cursor-pointer block py-2">BIKES</div>
              <div className="nav-link cursor-pointer block py-2">SERVICE</div>
            </div>
          </div>
        )}
      </nav>
    </header>
  );
};

export default Header;