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

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

  const handleOnToggleClick = () => {
    setIsToggled((prev) => !prev);
  };
  return (
    <header
      className={`bg-white w-full ${
        isToggled
          ? "rounded-ee-lg rounded-es-lg shadow-[#00000026] shadow-md"
          : ""
      } text-white flex flex-col text-sm items-center transition-all duration-500 ease-in-out absolute top-0 left-0 z-[99999900] overflow-hidden font-usual ${
        isToggled ? "max-h-[472px]" : "max-h-14"
      }`}
    >
      <div className="flex justify-between w-full p-4">
        <div className={`text-[#0D1922] transition-opacity duration-500`}>
          <LogoIcon />
        </div>
        <div className="w-6 h-6 text-[#0D1922]" onClick={handleOnToggleClick}>
          <BurgerMenuIcon isToggled={isToggled} />
        </div>
      </div>
      <div className="flex flex-col justify-between h-full items-end w-full p-4 bg-[#F3F3F2]">
        {isAuth && (
          <div className="pb-2 w-full">
            <Auth isAuth={isAuth} />
          </div>
        )}
        <Navbar />
        <div className="py-3">
          <Location />
        </div>
        {!isAuth && <Auth isAuth={isAuth} />}
      </div>
    </header>
  );
};

export default MobileHeader;