import React, { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Menu, X } from "lucide-react";
import { DesktopNav } from '../Navbar/desktopNav';
import { MobileNav } from '../Navbar/mobileNav';
import SearchBar from './_partials/searchBar';

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

  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <header className="relative bg-zinc-900">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between py-4">
          {/* Logo */}
          <h1 className="brand-logo text-purple-700 font-bold text-2xl">EDU CONNECT</h1>
          <SearchBar />
          <div className='flex gap-8'>
            <DesktopNav />
            <div className="hidden md:block space-x-4">
              <Button className='bg-purple-700'>
                Login
              </Button>
              <Button className='bg-purple-700'>
                Register
              </Button>
            </div>
          </div>



          {/* Hamburger Menu Button */}
          <button
            onClick={toggleMenu}
            className="md:hidden p-2 rounded-md hover:bg-gray-100"
          >
            {isMenuOpen ? (
              <X className="h-6 w-6" />
            ) : (
              <Menu className="h-6 w-6" />
            )}
          </button>
        </div>

        {/* Mobile Navigation */}
        <MobileNav isOpen={isMenuOpen} />
      </div>
    </header>
  );
};

export default Header;