import { Logo } from "../icons/Logo";
import { AddressSearch } from "./AddressSearch";
import { twMerge } from "tailwind-merge";
import { ModeSelector } from "../components/ModeSelector";

export const MapHeader = ({ isSidebarCollapsed }) => {
  return (
    <div className="absolute top-[20px] left-[30px] flex items-center gap-x-10">
      <div
        className={twMerge(
          "hidden",
          isSidebarCollapsed && "flex items-center gap-x-3 "
        )}
      >
        <Logo />
        <ModeSelector />
      </div>

      <AddressSearch />
    </div>
  );
};
