// import React from "react";
// import { FiMenu, FiBell } from "react-icons/fi";

// const Header = ({ toggleSidebar, toggleMobileSidebar }) => {
//   return (
//     <header className="flex items-center justify-between bg-white shadow px-4 py-3 sticky top-0 z-20">
//       <div className="flex items-center gap-4">
//         <button
//           className="md:hidden p-2 rounded-md hover:bg-gray-100 transition"
//           onClick={toggleMobileSidebar}
//         >
//           <FiMenu className="text-[#4880FF]" />
//         </button>

//         <button
//           className="hidden md:block p-2 rounded-md hover:bg-gray-100 transition"
//           onClick={toggleSidebar}
//         >
//           <FiMenu className="text-[#4880FF]" />
//         </button>

//         <h1 className="text-xl font-semibold hidden md:block text-[#4880FF]">
//           Dashboard
//         </h1>
//       </div>

//       <div className="flex items-center gap-4">
//         <button className="p-2 rounded-md hover:bg-gray-100 transition">
//           <FiBell className="text-[#4880FF]" />
//         </button>
//         <div className="hidden md:flex items-center gap-2">
//           <span className="text-gray-700">Admin</span>
//           <img
//             src="/avatar.png"
//             alt="avatar"
//             className="w-8 h-8 rounded-full border-2 border-[#4880FF]"
//           />
//         </div>
//       </div>
//     </header>
//   );
// };

// export default Header;



import React, { useState } from "react";
import { FiMenu, FiBell, FiSearch, FiChevronDown } from "react-icons/fi";

const Header = ({ toggleSidebar, toggleMobileSidebar }) => {
  const [showDropdown, setShowDropdown] = useState(false);

  return (
    <header className="sticky top-0 z-20 h-16 bg-white border-b border-gray-100 flex items-center justify-between px-4 md:px-6 shadow-sm">

      {/* ── Left: Hamburger + Search ─────────────────────── */}
      <div className="flex items-center gap-3">
        {/* Mobile hamburger */}
        <button
          className="md:hidden p-2 rounded-xl hover:bg-gray-100 transition text-gray-600"
          onClick={toggleMobileSidebar}
        >
          <FiMenu size={20} />
        </button>

        {/* Desktop hamburger */}
        <button
          className="hidden md:flex p-2 rounded-xl hover:bg-gray-100 transition text-gray-600"
          onClick={toggleSidebar}
        >
          <FiMenu size={20} />
        </button>

        {/* Search bar */}
        <div className="hidden md:flex items-center gap-2 bg-gray-50 border border-gray-200 rounded-xl px-3 py-2 w-64 group focus-within:border-blue-400 focus-within:bg-white transition-all">
          <FiSearch size={15} className="text-gray-400 flex-shrink-0" />
          <input
            type="text"
            placeholder="Search..."
            className="bg-transparent text-sm text-gray-700 placeholder-gray-400 outline-none w-full"
          />
        </div>
      </div>

      {/* ── Right: Bell + Avatar ─────────────────────────── */}
      <div className="flex items-center gap-2">

        {/* Notification bell */}
        <button className="relative p-2 rounded-xl hover:bg-gray-100 transition text-gray-600 group">
          <FiBell size={20} />
          {/* Unread dot */}
          <span className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full bg-red-500 ring-2 ring-white" />
        </button>

        {/* Avatar + dropdown */}
        <div className="relative">
          <button
            onClick={() => setShowDropdown(!showDropdown)}
            className="flex items-center gap-2 pl-1 pr-2 py-1 rounded-xl hover:bg-gray-100 transition"
          >
            {/* Avatar */}
            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white text-xs font-bold shadow">
              A
            </div>
            <div className="hidden md:block text-left">
              <p className="text-sm font-semibold text-gray-800 leading-tight">Admin</p>
              <p className="text-xs text-gray-400 leading-tight">Super Admin</p>
            </div>
            <FiChevronDown
              size={14}
              className={`hidden md:block text-gray-400 transition-transform duration-200 ${showDropdown ? "rotate-180" : ""}`}
            />
          </button>

          {/* Dropdown */}
          {showDropdown && (
            <>
              <div className="fixed inset-0 z-10" onClick={() => setShowDropdown(false)} />
              <div className="absolute right-0 top-12 z-20 bg-white border border-gray-200 rounded-xl shadow-xl py-1.5 w-44 text-sm">
                <button className="w-full text-left px-4 py-2.5 text-gray-700 hover:bg-gray-50 transition">
                  Profile
                </button>
                <button className="w-full text-left px-4 py-2.5 text-gray-700 hover:bg-gray-50 transition">
                  Settings
                </button>
                <div className="border-t border-gray-100 my-1" />
                <button className="w-full text-left px-4 py-2.5 text-red-500 hover:bg-red-50 transition font-medium">
                  Logout
                </button>
              </div>
            </>
          )}
        </div>
      </div>
    </header>
  );
};

export default Header;