import { useState } from "react";
import LogoIcon from "../../icons/LogoIcon";
import Auth from "../Auth/Auth";
import Navbar from "../Navbar/Navbar";
import Location from "../Location";

const MobileHeader = () => {
  const [isToggled, setIsToggled] = useState(false);

  const handleOnToggleClick = () => {
    setIsToggled((prev) => !prev);
  };
  return (
    <header
      className={`bg-white w-full text-white flex flex-col text-sm items-center transition-[height] duration-500 ease-in-out absolute top-0 left-0 z-30 overflow-hidden ${
        isToggled ? "h-[472px]" : "h-14"
      }`}
    >
      <div className="flex justify-between w-full p-4">
        <div
          className={`text-[#0D1922] transition-opacity duration-500 ${
            isToggled ? "opacity-0" : "opacity-100"
          }`}
        >
          <LogoIcon />
        </div>
        <div className="bg-black w-6 h-6" onClick={handleOnToggleClick}></div>
      </div>
      <div className="flex flex-col justify-between h-full items-center w-full ">
        <div className="flex flex-col gap-4">
          <div className="text-[#0D1922] items-center">
            <LogoIcon />
          </div>
          <Location />
        </div>
        <Navbar />
        <Auth />
      </div>
    </header>
  );
};

export default MobileHeader;
