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

export const Header = () => {
  return (
    <div className="absolute top-[20px] left-[19px] flex items-center z-10">
      <div className={twMerge("flex items-center gap-x-[42px]")}>
        <HeaderLogo />
        <div className="flex items-center gap-x-3">
          <ModeSelector />
        </div>
      </div>

      <div className="ml-[71px]">
        <AddressSearch />
      </div>
    </div>
  );
};
