"use client";
import Image from "next/image";
import { useContext, useEffect, useState } from "react";
import cover from "../../public/images/navbar/n1.jpg";
import divider from "../../public/images/divider.png";
import logoWhite from "../../public/images/logo-white.png";
import logoBlack from "../../public/images/logo.png";

import SearchSideBar from "@comp/Category/Mobile/Component/SearchSideBar/page";
import AppContext from "@ctx/AppContext";
import Link from "next/link";
import PersianNumber from "plugins/PersianNumber";
import BottomSheetCart from "plugins/bottomSheet/BottomSheetCart";
import CartNavbar from "./CartNavbar/page";
import { debounce } from "lodash";
import { useRouter } from "next/navigation";
import ResultSearchBar from "./ResultSearchBar/page";

const Navbar = ({ theme }) => {
  const [open, setOpen] = useState(false);

  const CTX = useContext(AppContext);
  const router = useRouter();
  const dataNav = CTX.state.navData;
  const profile = CTX.state.profile;
  const cart = CTX.state.cart;
  const searchResultCategoryData = CTX.state.searchResultData.categories;
  const searchResultProductData = CTX.state.searchResultData.products;

  const [navItemHover, setNavItemHover] = useState(null);
  const [isDesktop, setIsDesktop] = useState(null);
  const [closeNavbar, setClosNavbar] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const [smallDashboard, setSmallDashboard] = useState(false);
  const [searchResultShow, setSearchResultShow] = useState(false);
  const [searchValue, setSearchValue] = useState("");

  const handleItemNavber = (index) => {
    setNavItemHover(index);
  };

  const handleRemoveSearch = () => {
    CTX.setSearchResultData([]);
    setSearchValue("");
    setSearchResultShow(false);
  };

  useEffect(() => {
    const handleResize = () => {
      setIsDesktop(window.innerWidth > 1000); // You can adjust the width threshold as needed
    };

    // Set initial window size
    handleResize();

    // Add event listener to handle window resize
    window.addEventListener("resize", handleResize);

    // Remove event listener on component unmount
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      setIsScrolled(scrollTop > 200);
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  useEffect(() => {
    // Define a function to send the request
    const sendRequest = async () => {
      CTX.fetchSearchResult(searchValue);

      setSearchResultShow(true);
    };

    // Set a timer to send the request after 2000 milliseconds of inactivity
    const timer = setTimeout(() => {
      if (searchValue.trim() !== "") {
        sendRequest();
      }
    }, 1000);

    // Clean up function to clear the timer on component unmount or when searchTerm changes
    return () => clearTimeout(timer);
  }, [searchValue]);

  const handleInputChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <>
      {isDesktop && (
        <div className=" pt-10  tr03">
          <div className="flex justify-between rtl px-20  ">
            <div
              className={`w-[100px] mt-0 py-5 border-b-[2px] relative  z-10 ${
                theme == 0 ? "border-white" : "border-black"
              }  `}
            >
              <Link href={"/"}>
                <Image
                  src={theme == 0 ? logoWhite : logoBlack}
                  alt="وسمه vesmeh"
                />
              </Link>
            </div>

            <div className={`flex rtl py-5 `}>
              <>
                <div className=" px-3 ltr">
                  <input
                    type="text"
                    className="form-control !py-[10px]   bg-gray-100 !border-[0px] border-gray-100 !rounded-2xl text-right focus:!border-[0px] !text-sm !pl-[60px] !w-[375px]  "
                    placeholder="دستت برای جست و جو بازه"
                    value={searchValue}
                    onChange={(e) => handleInputChange(e)}
                  />

                  {!searchResultShow ? (
                    <div className="absolute mt-[-36px] ml-[6px] z-90">
                      <div className="w-[30px] h-[30px] bg-gray-300  !rounded-xl pt-2">
                        <svg
                          width="12"
                          height="12"
                          viewBox="0 0 275 275"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          className="mx-auto "
                        >
                          <path
                            d="M215.913 215.913L265 265M250.832 130.822C250.832 197.553 196.915 251.644 130.424 251.644C63.9166 251.644 10 197.552 10 130.838C10 64.0759 63.9166 10 130.408 10C196.915 10 250.832 64.0919 250.832 130.822Z"
                            stroke="black"
                            stroke-width="18.75"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                          />
                        </svg>
                      </div>
                    </div>
                  ) : (
                    <div
                      className="absolute  mt-[-36px] ml-[6px] z-90"
                      onClick={() => handleRemoveSearch()}
                    >
                      <div className="w-[30px] h-[30px] bg-gray-300     !rounded-xl pt-2">
                        <svg
                          width="9"
                          height="9"
                          viewBox="0 0 214 214"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          className="mx-auto mt-[2px] "
                        >
                          <path
                            d="M4.42496 8.34954L6.24996 6.24955C9.42467 3.07411 13.6335 1.1434 18.1112 0.80849C22.589 0.473578 27.0382 1.7567 30.65 4.42455L32.75 6.24955L107 80.4745L181.25 6.22455C182.98 4.43456 185.05 3.00714 187.338 2.02557C189.626 1.04399 192.087 0.527921 194.576 0.507469C197.066 0.487016 199.535 0.962591 201.839 1.90644C204.142 2.8503 206.235 4.24353 207.995 6.00484C209.755 7.76615 211.146 9.86026 212.087 12.165C213.029 14.4697 213.502 16.9389 213.48 19.4285C213.457 21.9181 212.938 24.3783 211.955 26.6654C210.971 28.9525 209.542 31.0208 207.75 32.7495L133.525 107L207.775 181.25C210.947 184.427 212.873 188.638 213.203 193.116C213.533 197.593 212.246 202.041 209.575 205.65L207.75 207.75C204.575 210.925 200.366 212.856 195.889 213.191C191.411 213.526 186.962 212.242 183.35 209.575L181.25 207.75L107 133.525L32.75 207.775C31.0195 209.565 28.9498 210.992 26.6618 211.974C24.3738 212.955 21.9132 213.471 19.4236 213.492C16.9339 213.512 14.4652 213.036 12.1613 212.093C9.85749 211.149 7.76468 209.756 6.00503 207.994C4.24538 206.233 2.85412 204.139 1.91244 201.834C0.970764 199.529 0.497518 197.06 0.520318 194.571C0.543117 192.081 1.06151 189.621 2.04524 187.334C3.02897 185.047 4.45835 182.978 6.24996 181.25L80.475 107L6.22496 32.7495C3.05326 29.5717 1.12717 25.3612 0.796856 20.8836C0.466538 16.4059 1.75392 11.9584 4.42496 8.34954Z"
                            fill="black"
                          />
                        </svg>
                      </div>
                    </div>
                  )}
                </div>

                {searchResultShow && (
                  <div
                    className={`relative !z-[100] tr03 ${
                      searchResultShow ? "opacity-100" : "opacity-100"
                    } `}
                    onClick={() => setSearchResultShow(!searchResultShow)}
                  >
                    <div className="absolute w-[370px] bg-gray-100 max-h-[450px]  rounded-xl   mr-[-385px] mt-[45px]  p-5 overflow-auto scroll-1 ">
                      <ResultSearchBar
                        searchResultProductData={searchResultProductData}
                        searchResultCategoryData={searchResultCategoryData}
                      />
                    </div>
                  </div>
                )}
              </>
              {profile?.length <= 0 ? (
                <div className="flex">
                  <Link href={"/login"}>
                    <div className="bg-gray-100 py-2 px-5 rounded-xl text-sm ">
                      ورود / عضویت{" "}
                    </div>
                  </Link>
                </div>
              ) : (
                <div className="flex">
                  <div>
                    <div
                      className="bg-gray-100 py-2 px-5 rounded-xl text-sm flex cursor-pointer "
                      onClick={() => setSmallDashboard(!smallDashboard)}
                    >
                      <p className="mb-0">
                        {profile?.firstName} {profile?.lastName}
                      </p>
                      <div className="w-[20px] h-[20px] rounded-full bg-primary-500 mr-2"></div>
                    </div>

                    {smallDashboard && (
                      <div
                        className={`relative !z-[100] tr03 ${
                          smallDashboard ? "opacity-100" : "opacity-0"
                        } `}
                        onMouseEnter={() => setSmallDashboard(true)}
                        onMouseLeave={() => setSmallDashboard(false)}
                      >
                        <div className="absolute w-[270px] bg-gray-100  rounded-xl mt-2  mr-[-87px] overflow-hidden">
                          <div>
                            <ul className="p-2 ">
                              <li className="group cursor-pointer">
                                <Link href={"/profile"}>
                                  <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                    <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                      داشبورد
                                    </p>
                                    <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                  </div>
                                </Link>
                              </li>

                              <li className="group cursor-pointer">
                                <Link href={"/profile/orders"}>
                                  <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                    <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                      پیگیری سفارش
                                    </p>
                                    <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                  </div>
                                </Link>
                              </li>

                              <li className="group cursor-pointer">
                                <Link href={"/profile/address"}>
                                  <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                    <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                      آدرس ها{" "}
                                    </p>
                                    <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                  </div>
                                </Link>
                              </li>

                              <li className="group cursor-pointer">
                                <Link href={"/profile/saleCooperationSystem"}>
                                  <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                    <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                      همکاری در فروش{" "}
                                    </p>
                                    <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                  </div>
                                </Link>
                              </li>

                              <li
                                className="flex justify-between p-2 rounded-full  group hover:bg-red-200 tr03 cursor-pointer"
                                onClick={() =>
                                  CTX.setBottomSheetLogOutOpen(true)
                                }
                              >
                                <p className="mb-0 text-sm text-red-500 group-hover: ">
                                  خروج{" "}
                                </p>
                                <div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              )}

              <CartNavbar isScrolled={isScrolled} />
            </div>
          </div>

          <div className="px-20">
            <div
              className={`w-full h-[2px]  mt-4 relative top-[-17px] rounded-full overflow-hidden opacity-10 ${
                theme == 0 ? "bg-gray-300" : "bg-gray-500"
              } `}
            ></div>
          </div>

          <div
            className={`flex justify-center rtl  pt-3 tr03 z-50 tr03  ${
              navItemHover != null ? "bg-white rounded-xl " : "bg-transparent"
            }${
              isScrolled
                ? " !fixed top-0 w-full bg-white "
                : " relative top-[-18px] "
            }  
              
            ${theme == 0 ? "" : "!bg-gray-100"}`}
          >
            <div className="flex rtl">
              {dataNav?.map((e, index) => (
                <p
                  className={`mb-0 pt-2 pb-3 px-2 tr03 cursor-pointer    ${
                    navItemHover == index
                      ? " border-y-[5px] border-b-primary-800 border-t-transparent  text-primary-900"
                      : "border-y-[5px] border-y-transparent  text-black"
                  }
        ${theme == 0 ? "text-gray-400" : "text-gray-900"}  
         ${theme == 0 && isScrolled ? "text-gray-900" : ""}`}
                  onMouseEnter={() => handleItemNavber(index)}
                  onMouseLeave={() => setNavItemHover(null)}
                  key={index}
                >
                  {e.name}{" "}
                </p>
              ))}
            </div>

            {/* <div
              onClick={() => {
                const element = document.getElementById("offer");
                if (element) {
                  const offset = -80; // Adjust this value as needed
                  window.scrollTo({
                    top: element.offsetTop + offset,
                    behavior: "smooth",
                  });
                }
              }}
            >
              <div className="bg-red-600 mb-4 px-4 mt-3 h-fit mr-2 rounded-full cursor-pointer">
                <p className="mb-0 text-white">بمب امروز </p>
              </div>
            </div> */}
          </div>

          <div
            className="flex justify-center  "
            onMouseEnter={() => setNavItemHover(navItemHover)}
            onMouseLeave={() => setNavItemHover(null)}
          >
            <div
              className={`  w-3/4 mr-0 z-50  ${
                isScrolled ? "fixed top-10 mt-[29px]" : "relative top-[-3px]"
              } `}
            >
              <div
                className={`flex ${
                  navItemHover != null ? " opacity-100" : "hidden opacity-0"
                }`}
              >
                <div className="w-[60px] absolute left-0 rotate-180 ml-[-60px] mt-[-15px] ">
                  <Image src={divider} alt="" />
                </div>

                <div
                  className={`block absolute w-full bg-gray-100 bottom-[-435px] h-[450px] p-4 rounded-b-2xl tr03 z-50 over`}
                >
                  <div className="flex  rtl">
                    <div className=" mx-2 p-5 w-full ">
                      <ul className="flex flex-col flex-wrap max-h-96 list-none ">
                        {navItemHover != null &&
                          dataNav &&
                          dataNav[navItemHover].children.map((e, index) => (
                            <li className=" my-2" key={index}>
                              <div className="flex">
                                <div className="w-[10px] h-[10px] rounded-full bg-primary-500 mt-1 mx-2"></div>
                                <Link
                                  href={`/categories/${e.id}/${e.name
                                    .split(" ")
                                    .join("-")}`}
                                >
                                  <p className="mb-0  font-bold text-sm hover:text-primary-500 tr03 cursor-pointer">
                                    {e.name}
                                  </p>
                                </Link>

                                {e.children.length > 0 && (
                                  <div>
                                    <svg
                                      width="10"
                                      height="10"
                                      viewBox="0 0 923 1697"
                                      fill="none"
                                      xmlns="http://www.w3.org/2000/svg"
                                      className="mx-1 mt-[3px]"
                                    >
                                      <path
                                        d="M714 209L209.293 848.115L714 1487.23"
                                        stroke="blue"
                                        stroke-width="200"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                      />
                                    </svg>
                                  </div>
                                )}
                              </div>

                              {/* ======hear==== */}
                              {e.children && e.children.length > 0 && (
                                <div>
                                  {e.children.map((child, index) => (
                                    <Link
                                      key={index}
                                      href={`/categories/${child.id}/${e.name
                                        .split(" ")
                                        .join("-")}`}
                                    >
                                      <p
                                        key={child.id}
                                        className="mb-0 mt-2 text-[14px] mr-2 hover:bg-primary-400 hover:text-white w-fit rounded-full px-2 tr03 cursor-pointer"
                                      >
                                        {child.name}
                                      </p>
                                    </Link>
                                  ))}
                                </div>
                              )}
                            </li>
                          ))}
                      </ul>
                    </div>

                    <div className=" w-[250px] ">
                      <div className="absolute left-5 ">
                        <Image
                          src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${dataNav[navItemHover]?.mainImage}`}
                          className=" !w-[250px] h-[250px]  rounded-xl object-cover  "
                          width={600}
                          height={600}
                          alt={`${dataNav[navItemHover]?.name} وسمه`}
                        />
                      </div>

                      {/* <div className=" mt-[90px] w-[230px] relative">
                        <div className="flex justify-center">
                          <div className="w-[50px] h-[50px] rounded-full bg-white mt-5 ">
                            <svg
                              width="20"
                              height="20"
                              viewBox="0 0 356 357"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                              className="mx-auto mt-4 mr-3 opacity-30"
                            >
                              <path
                                d="M0 1.17188L1.17509 356.17L354.586 177.499L0 1.17188Z"
                                fill="black"
                              />
                            </svg>
                          </div>
                        </div>
                        <p className="mb-0 w-full text-primary-500 bg-primary-100 mt-3 text-center">
                          چرا آرایشی وسمه ؟
                        </p>
                      </div> */}
                    </div>
                  </div>
                </div>
                <div className="w-[60px] absolute right-0 rotate-90 mr-[-60px] mt-[-15px] ">
                  <Image src={divider} alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {!isDesktop && (
        <>
          <div
            className={`flex justify-between rtl z-[50] rounded-bl-3xl ${
              isScrolled
                ? " !sticky top-0 w-full bg-gray-100 p-5"
                : " relative px-5 pt-5 "
            }  `}
          >
            {" "}
            <Link href={"/"}>
              <div className="w-[70px] mt-[6px]  z-10  ">
                {isScrolled ? (
                  <Image
                    src={theme == 0 ? logoBlack : logoBlack}
                    alt="وسمه vesmeh"
                  />
                ) : (
                  <Image
                    src={theme == 0 ? logoWhite : logoBlack}
                    alt="وسمه vesmeh"
                  />
                )}
              </div>
            </Link>
            <div className="flex">
              <div className="flex">
                {profile?.length <= 0 ? (
                  <div className="flex">
                    <Link href={"/login"}>
                      <div className="bg-gray-100 py-2 px-3 rounded-xl text-sm ">
                        ورود / عضویت{" "}
                      </div>
                    </Link>
                  </div>
                ) : (
                  <div className="flex">
                    <div>
                      <div
                        className="bg-gray-100 py-2 px-3 rounded-xl text-sm flex cursor-pointer "
                        onClick={() => setSmallDashboard(!smallDashboard)}
                      >
                        <p className="mb-0">
                          {profile?.firstName} {profile?.lastName}
                        </p>{" "}
                      </div>

                      {smallDashboard && (
                        <div
                          className={`relative !z-[100] tr03 ${
                            smallDashboard ? "opacity-100" : "opacity-0"
                          } `}
                          onMouseEnter={() => setSmallDashboard(true)}
                          onMouseLeave={() => setSmallDashboard(false)}
                        >
                          <div className="absolute w-[270px] bg-gray-100  rounded-xl mt-2  mr-[-87px] overflow-hidden">
                            <div>
                              <ul className="p-2 ">
                                <li className="group cursor-pointer">
                                  <Link href={"/profile"}>
                                    <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                      <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                        داشبورد
                                      </p>
                                      <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                    </div>
                                  </Link>
                                </li>

                                <li className="group cursor-pointer">
                                  <Link href={"/profile/orders"}>
                                    <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                      <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                        پیگیری سفارش
                                      </p>
                                      <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                    </div>
                                  </Link>
                                </li>

                                <li className="group cursor-pointer">
                                  <Link href={"/profile/address"}>
                                    <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                      <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                        آدرس ها{" "}
                                      </p>
                                      <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                    </div>
                                  </Link>
                                </li>

                                <li className="group cursor-pointer">
                                  <Link href={"/profile/saleCooperationSystem"}>
                                    <div className="flex justify-between  p-2  rounded-full group-hover:bg-primary-200 tr03">
                                      <p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
                                        همکاری در فروش{" "}
                                      </p>
                                      <div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
                                    </div>
                                  </Link>
                                </li>

                                <li
                                  className="flex justify-between p-2 rounded-full  group hover:bg-red-200 tr03 cursor-pointer"
                                  onClick={() =>
                                    CTX.setBottomSheetLogOutOpen(true)
                                  }
                                >
                                  <p className="mb-0 text-sm text-red-500 group-hover: ">
                                    خروج{" "}
                                  </p>
                                  <div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>

              <div
                className="mx-2 "
                onClick={() => CTX.setBottomSheetCartOpen(true)}
              >
                {/* <div className="absolute mt-[-16px] mr-[6px] ">
                  {cart?.length > 0 && (
                    <div className="">
                      <PersianNumber
                        number={cart?.length}
                        style={`!text-[10px] text-primary-900 font-bold ${
                          theme == 1
                            ? "text-primary-500"
                            : isScrolled
                            ? "text-primary-500"
                            : "text-white"
                        }`}
                      />
                    </div>
                  )}
                </div>
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 248 232"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="opacity-80"
                >
                  <path
                    d="M18.4371 138.212C9.46208 96.3 4.96208 75.3375 16.2246 61.425C27.4746 47.5 48.9121 47.5 91.7746 47.5H156.225C199.1 47.5 220.512 47.5 231.775 61.425C243.025 75.35 238.537 96.3 229.562 138.212L224.2 163.212C218.112 191.625 215.075 205.825 204.762 214.163C194.45 222.5 179.925 222.5 150.875 222.5H97.1246C68.0746 222.5 53.5496 222.5 43.2496 214.163C32.9246 205.825 29.8746 191.625 23.7996 163.212L18.4371 138.212Z"
                    stroke={
                      isScrolled ? "black" : theme == 1 ? "black" : "white"
                    }
                    stroke-width="18.75"
                  />
                  <path
                    opacity="0.6"
                    d="M199 85L161.5 10M49 85L86.5 10"
                    stroke={
                      isScrolled ? "black" : theme == 1 ? "black" : "white"
                    }
                    stroke-width="18.75"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg> */}

                <div className="absolute mt-[-8px] mr-[6px] bg-white w-[15px] h-[15px] rounded-full text-center ">
                  {cart?.length > 0 && (
                    <div className="">
                      <PersianNumber
                        number={cart?.length}
                        style={`!text-[10px] text-primary-900 font-bold text-center relative top-[-5px] ${
                          theme == 1
                            ? "text-primary-500"
                            : isScrolled
                            ? "text-primary-500"
                            : "text-white"
                        }`}
                      />
                    </div>
                  )}
                </div>
                <div
                  className="bg-secondary-600  py-2 px-3 rounded-xl text-sm flex cursor-pointer   "
                  onClick={() => CTX.setBottomSheetCartOpen(true)}
                >
                  <p className="mb-0 text-white text-[12px]">سبد خرید</p>
                </div>
              </div>
            </div>
          </div>
          <SearchSideBar />
          <BottomSheetCart />
        </>
      )}
    </>
  );
};

export default Navbar;