/* eslint-disable react-hooks/exhaustive-deps */
import { useEffect } from "react";
import DownloadIcon from "../icons/DownloadIcon";
import useFavoritesStore from "../../store/useFavoritesStore";

function NavbarModal() {
  const { favoriteUnits } = useFavoritesStore();

  useEffect(() => {
    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = "auto";
    };
  }, []);

  return (
    <div className="fixed top-[56px] left-0 w-full h-[calc(100dvh-56px)] bg-[#F3F3F2] z-[99999999] sm:p-4 p-3 space-y-4 overflow-y-auto">
      <div className="grid sm:grid-cols-2 gap-2 border-b border-[#E2E2DC] pb-4">
        <div className="flex flex-col gap-2">
          <a
            href="/masterplan"
            className="p-4 bg-white rounded-lg text-[#0D1922]"
          >
            Map
          </a>
          <a
            href="/unit-types"
            className="p-4 bg-white rounded-lg text-[#0D1922]"
          >
            Unit Types
          </a>
          <a href="/about" className="p-4 bg-white rounded-lg text-[#0D1922]">
            About IRTH
          </a>
        </div>
        <div className="flex flex-col gap-2">
          <a
            href="/favorites"
            className="p-4 bg-white rounded-lg text-[#0D1922] "
          >
            <div className="relative w-fit">
              Favorites
              {favoriteUnits.length > 0 && (
                <div className="absolute -right-[18px] -top-1 w-4 h-4 bg-[#00BED7] rounded-full flex items-center justify-center">
                  <p className="text-white text-[10px] font-mono font-semibold -ml-[0.5px]">
                    {favoriteUnits.length}
                  </p>
                </div>
              )}
            </div>
          </a>
          <a href="/search" className="p-4 bg-white rounded-lg text-[#0D1922]">
            Search
          </a>
        </div>
      </div>
      <div className="space-y-4">
        <p className="font-semibold text-[#0D1922]">Brochures</p>
        <div className="grid gap-4 sm:grid-cols-2">
          <div className="space-y-3">
            <p className="text-sm text-[#0D1922]">Rove Home Marasi Drive</p>
            <div className="flex flex-col gap-2">
              <a
                href="#"
                className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
                download
              >
                <p>Rove Main Brochure</p>
                <DownloadIcon />
              </a>
              <a
                href="#"
                className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
                download
              >
                <p>Rove Amenties Brochure</p>
                <DownloadIcon />
              </a>
              <a
                href="#"
                className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
                download
              >
                <p>Rove Technical Brochure</p>
                <DownloadIcon />
              </a>
            </div>
          </div>
          <div className="space-y-3">
            <p className="text-sm text-[#0D1922]">Rove Home Downtown</p>
            <div className="flex flex-col gap-2">
              <a
                href="#"
                className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
                download
              >
                <p>Rove Main Brochure</p>
                <DownloadIcon />
              </a>
              <a
                href="#"
                className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
                download
              >
                <p>Rove Amenties Brochure</p>
                <DownloadIcon />
              </a>
              <a
                href="#"
                className="flex items-center justify-between px-3 py-2 text-xs font-semibold bg-white rounded-lg"
                download
              >
                <p>Rove Technical Brochure</p>
                <DownloadIcon />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default NavbarModal;