import Icons from "./icons";
import Search from "./Search";
import SideButton from "./sideButton";
import MenuProfile from "./MenuProfile";

function Header({ disableProfile, data, setActive }) {
  return (
    <div
      className="
        h-[56px] sm:h-[67px] md:h-[79px] lg:h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
        dark:bg-[#222433] dark:border-transparent
        flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[14px] sm:gap-[28px] md:gap-[42px] lg:gap-[56px]
      "
    >
      <SideButton setActive={setActive} />
      <Search />
      <div className="flex items-center justify-end gap-[8px] md:gap-[40px] min-w-fit">
        <Icons />
        {!disableProfile && <MenuProfile data={data} />}
      </div>
    </div>
  );
}

export default Header;