import Logo from "@/modules/ui/logo";
import Menu from "@/modules/layout/components/menu";
import Link from "next/link";
import CartMenu from "../../components/cart-menu";
import menuData from "../../../../../public/menufile.json";
import { MenuCategory } from "@/lib/types/models";
import { helpAndIdeasMenu } from "@/lib/utils/menu";
import User from "../../components/user";
import WishlistMenu from "../../components/wishlist-menu";
import MenuMobile from "../../components/menu-mobile";

export default async function Page() {
  const headerData = (menuData?.success
    ? menuData?.data ?? []
    : []) as unknown as MenuCategory[];
  return (
    <>
      <header className="w-full z-50 bg-white">
        {/* <div className="border-b border-b-[#EBEBF0]"> */}
        <div className="main-container mobile-container h-[60px] lg:h-[68px] flex justify-between items-center">
          <Link prefetch={false} href="/">
            <Logo />
          </Link>
          <div className="flex flex-col items-start justify-center sm:w-auto sm:flex-row sm:items-center sm:gap-2">
            <div className="flex w-full flex-row">
              {/* <div className="mx-0 flex-grow sm:mx-auto sm:flex-grow-0">
                <form>
                  <div className="flex gap-2 items-center">
                    <div className="relative lg:min-w-[370px] w-full">
                      <input
                        onChange={(e) => setSearchQuery(e.target.value)}
                        value={searchQuery}
                        type="search"
                        name="search"
                        id="search"
                        placeholder="I am shopping for..."
                        autoComplete="off"
                        className="custom-search  w-full rounded-full bg-gray-1  border border-gray-3 h-[42px] py-2.5 pl-5 pr-10 outline-hidden ease-in duration-200"
                      />

                      <button
                        id="search-btn"
                        aria-label="Search"
                        className="absolute flex items-center h-[42px] justify-center duration-200 ease-in  -translate-y-1/2 right-5 top-1/2 hover:text-blue"
                      >
                        <svg
                          className="w-5 h-5 text-gray-6"
                          width="24"
                          height="24"
                          viewBox="0 0 24 25"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          transform="rotate(0 0 0)"
                        >
                          <path
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M11.25 2.75C6.14154 2.75 2 6.89029 2 11.998C2 17.1056 6.14154 21.2459 11.25 21.2459C13.5335 21.2459 15.6238 20.4187 17.2373 19.0475L20.7182 22.5287C21.011 22.8216 21.4859 22.8217 21.7788 22.5288C22.0717 22.2359 22.0718 21.761 21.7789 21.4681L18.2983 17.9872C19.6714 16.3736 20.5 14.2826 20.5 11.998C20.5 6.89029 16.3585 2.75 11.25 2.75ZM3.5 11.998C3.5 7.71905 6.96962 4.25 11.25 4.25C15.5304 4.25 19 7.71905 19 11.998C19 16.2769 15.5304 19.7459 11.25 19.7459C6.96962 19.7459 3.5 16.2769 3.5 11.998Z"
                            fill="#343C54"
                          ></path>
                        </svg>
                      </button>
                    </div>
                  </div>
                </form>
              </div> */}
              <div className="flex flex-row items-center justify-between space-x-3 lg:space-x-4 flex-grow">
                <User />
                {/* <div className="flex items-center"> */}
                <div className="border-l border-stone h-12 mx-2"></div>
                {/* </div> */}
                <div className="hidden lg:block">
                  <WishlistMenu />
                </div>
                <div className="border-l border-stone h-12 mx-2 hidden lg:block"></div>
                <CartMenu />
                <div className="border-l border-stone h-12 mx-2 block lg:hidden"></div>
                <div className="lg:hidden">
                  <MenuMobile
                    headerData={headerData}
                    helpAndIdeasMenuData={helpAndIdeasMenu}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* </div> */}
        <Menu
          headerData={headerData || []}
          helpAndIdeasMenuData={helpAndIdeasMenu || []}
        />
        {/* <MenuDesktop
          headerData={headerData}
          helpAndIdeasMenuData={helpAndIdeasMenu}
        /> */}
      </header>
    </>
  );
}