import { Logo } 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-[58px] flex items-center z-10">
      <div className={twMerge("flex items-center gap-x-10")}>
        <Logo />
        <div className="flex items-center gap-x-3">
          <ModeSelector />
        </div>
      </div>

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