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;