FreeBug/frontend/edu-connect/src/components/common/Header/header.tsx

import React, { useContext, 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';
import Link from 'next/link';
import { routes } from '@/lib/routes';
import { AuthContext } from '@/helpers/context/AuthProvider';
import UserProfileDropDown from './_partials/userProfileDropDown';
import BrandLogo from '@/assets/img/brandLogo.png'
import Image from 'next/image';

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { user } = useContext(AuthContext)

  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 */}
          <Link href={routes.INDEX_PAGE} className='flex gap-2 items-center'>
            <Image src={BrandLogo} width={50} height={30} alt={'brand_logo'} className='bg-blend-darken'/>
            <h1 className="brand-logo text-purple-700 font-bold text-2xl">
              EduCONNECT
            </h1>
          </Link>
          <SearchBar />
          <div className='flex gap-8'>
            <DesktopNav />
            <div className="hidden md:block space-x-4">
              {
                !user ? (
                  <>
                    <Button className='bg-purple-700' asChild>
                      <Link href={routes.LOGIN_ROUTES}>
                        Login
                      </Link>
                    </Button>
                    <Button className='bg-purple-700' asChild>
                      <Link href={routes.REGISTER_ROUTES}>
                        Register
                      </Link>
                      
                    </Button>
                  </>
                ) : <UserProfileDropDown />
              }
            </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;