// /components/Header.jsx
import { useState } from "react";
import Link from "next/link";
import Image from "next/image";

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

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

  const closeMenu = () => {
    setIsMenuOpen(false);
  };

  return (
    <>
      {/* Header */}
      <header className="bg-white shadow-sm relative z-50 sticky top-0">
        <div className="container-full mx-auto px-4 py-4 flex items-center justify-between">
          <h1 className="text-2xl font-bold text-blue-600">
            <Link href="/">
              <Image 
                src="/find_deshi transparent.png" 
                alt="FindDeshi Logo" 
                width={140} 
                height={50} 
              />
            </Link>
          </h1>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex gap-6 items-center">
            
            <Link href="/" className="hover:text-brand-green text-[#575757]">
              Home
            </Link>
            <Link href="/classifieds" className="hover:text-brand-green text-[#575757]">
              Classifieds
            </Link>
            <Link href="/events" className="hover:text-brand-green text-[#575757]">
              Events
            </Link>
            <Link href="/matrimonial" className="hover:text-brand-green text-[#575757]">
              Matrimonial
            </Link>
            <Link href="/login" className="hover:text-brand-green text-[#575757]">
              Login
            </Link>
            <Link 
              href="/register" 
              className="px-4 py-2 bg-brand-green text-white rounded hover:bg-brand-green-dark"
            >
              Sign Up
            </Link>
          </nav>

          {/* Mobile Menu Button */}
          <button
            onClick={toggleMenu}
            className="md:hidden flex flex-col gap-1.5 w-8 h-8 items-center justify-center"
            aria-label="Toggle menu"
          >
            <span
              className={`w-6 h-0.5 bg-gray-700 transition-all duration-300 ${
                isMenuOpen ? "rotate-45 translate-y-2" : ""
              }`}
            ></span>
            <span
              className={`w-6 h-0.5 bg-gray-700 transition-all duration-300 ${
                isMenuOpen ? "opacity-0" : ""
              }`}
            ></span>
            <span
              className={`w-6 h-0.5 bg-gray-700 transition-all duration-300 ${
                isMenuOpen ? "-rotate-45 -translate-y-2" : ""
              }`}
            ></span>
          </button>
        </div>

        {/* Mobile Navigation Menu */}
        <div
          className={`md:hidden absolute top-full left-0 w-full bg-white shadow-lg transition-all duration-300 ease-in-out ${
            isMenuOpen
              ? "opacity-100 visible translate-y-0"
              : "opacity-0 invisible -translate-y-4"
          }`}
        >
          <nav className="flex flex-col px-4 py-6 space-y-4">
            <Link
              href="/"
              onClick={closeMenu}
              className="hover:text-brand-green text-[#575757] py-2 border-b border-gray-100"
            >
              Home
            </Link>
            <Link
              href="/matrimonial"
              onClick={closeMenu}
              className="hover:text-brand-green text-[#575757] py-2 border-b border-gray-100"
            >
              Matrimonial
            </Link>
            <Link
              href="/classifieds"
              onClick={closeMenu}
              className="hover:text-brand-green text-[#575757] py-2 border-b border-gray-100"
            >
              Classifieds
            </Link>
            <Link
              href="/events"
              onClick={closeMenu}
              className="hover:text-brand-green text-[#575757] py-2 border-b border-gray-100"
            >
              Events
            </Link>
            <Link
              href="/login"
              onClick={closeMenu}
              className="hover:text-brand-green text-[#575757] py-2 border-b border-gray-100"
            >
              Login
            </Link>
            <Link
              href="/register"
              onClick={closeMenu}
              className="px-4 py-3 bg-brand-green text-white rounded hover:bg-brand-green-dark text-center"
            >
              Sign Up
            </Link>
          </nav>
        </div>

        {/* Overlay for mobile menu */}
        {isMenuOpen && (
          <div
            onClick={closeMenu}
            className="md:hidden fixed inset-0 bg-black/20 -z-10"
          ></div>
        )}
      </header>
    </>
  );
};

export default Header;