"use client";
import React, {useEffect, useState} from "react";
import {DefaultMenuLinks} from "@/constants/menu/menu.const";
import Link from "next/link";
import Image from "next/image";
import Menu from "./Menu";
import ReservationButton from "./components/menu/ReservationButton";
import {toPersianNumber} from "@/utils/functions";

export default function TopMenu({lang}: {lang: string}) {
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    if (window.innerWidth < 1024) return;

    const handleScroll = () => {
      if (window.scrollY > 50) {
        setIsSticky(true);
      } else {
        setIsSticky(false);
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
  return (
    <div className="w-full shadow">
      <div
        className={`w-full z-30 transition-all duration-300 md:px-10 px-4 flex lg:justify-around justify-between items-center 
      ${
        isSticky
          ? "h-[80px] lg:fixed top-0 custom-shadow backdrop-blur-3xl bg-white/90"
          : "lg:h-[120px] h-[60px] bg-white relative"
      }`}
        // className="bg-white container   sticky top-0 z-30"
      >
        {/* <div className="top-0 absolute h-[40px] bg-radial bg-secondary/30 backdrop-blur-2xl w-full">

      </div> */}
        <div className="lg:w-[150px] flex gap-x-3 transition-all duration-300 items-center ">
          {/* <Link href={"/"} className="flex items-center gap-x-2">
            <div
              className={`relative ${
                isSticky
                  ? " h-[70px] w-[70px]"
                  : "lg:h-[90px] h-[50px] lg:w-[97px] w-[40px]"
              }`}
            >
              <Image
                loading="lazy"
                src="/shomalhospital-ipd-logo.png"
                fill
                alt="shomal hospital"
                style={{color: "transparent", fill: "red", objectFit: "fill"}}
              />
            </div>
          </Link> */}
          <Link href={"/"} className="flex items-center gap-x-2">
            <div
              className={`relative ${
                isSticky
                  ? " h-[70px] w-[70px]"
                  : "lg:h-[90px] h-[50px] lg:w-[97px] w-[40px]"
              }`}
            >
              <Image
                loading="lazy"
                src={
                  lang === "en" ? "/main-logo-blue.png" : "/main-logo-blue.png"
                }
                fill
                alt="shomal hospital"
                style={{color: "transparent", fill: "red", objectFit: "fill"}}
              />
            </div>
          </Link>
        </div>

        {/* <MobileMenu lang={lang} /> */}
        <div className="lg:grid hidden grid-cols-12  gap-x-1 w-full h-full items-center">
          <div className="col-span-9 flex items-center justify-start w-full h-full">
            <Menu lang={lang} direction="horizontal" items={DefaultMenuLinks} />
          </div>
          <div className="col-span-3 flex items-center justify-end gap-x-5">
            <ReservationButton isSticky={isSticky} />
            <Link
              href={"/contact-us#request_accept"}
              dir="ltr"
              className={`bg-blue-primary text-white rounded-full ${
                isSticky ? "py-3 px-4" : "py-3 px-6"
              } text-xl font-semibold shadow-lg flex flex-col justify-center items-center gap-y-1 whitespace-nowrap  shadow-neutral-300 hover:shadow-none transition-all duration-200`}
            >
              <div className="flex items-center gap-x-3">
                <svg
                  stroke="currentColor"
                  fill="currentColor"
                  strokeWidth="0"
                  viewBox="0 0 256 256"
                  height="30px"
                  width="30px"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M144.27,45.93a8,8,0,0,1,9.8-5.66,86.22,86.22,0,0,1,61.66,61.66,8,8,0,0,1-5.66,9.8A8.23,8.23,0,0,1,208,112a8,8,0,0,1-7.73-5.94,70.35,70.35,0,0,0-50.33-50.33A8,8,0,0,1,144.27,45.93Zm-2.33,41.8c13.79,3.68,22.65,12.54,26.33,26.33A8,8,0,0,0,176,120a8.23,8.23,0,0,0,2.07-.27,8,8,0,0,0,5.66-9.8c-5.12-19.16-18.5-32.54-37.66-37.66a8,8,0,1,0-4.13,15.46Zm81.94,95.35A56.26,56.26,0,0,1,168,232C88.6,232,24,167.4,24,88A56.26,56.26,0,0,1,72.92,32.12a16,16,0,0,1,16.62,9.52l21.12,47.15,0,.12A16,16,0,0,1,109.39,104c-.18.27-.37.52-.57.77L88,129.45c7.49,15.22,23.41,31,38.83,38.51l24.34-20.71a8.12,8.12,0,0,1,.75-.56,16,16,0,0,1,15.17-1.4l.13.06,47.11,21.11A16,16,0,0,1,223.88,183.08Zm-15.88-2s-.07,0-.11,0h0l-47-21.05-24.35,20.71a8.44,8.44,0,0,1-.74.56,16,16,0,0,1-15.75,1.14c-18.73-9.05-37.4-27.58-46.46-46.11a16,16,0,0,1,1-15.7,6.13,6.13,0,0,1,.57-.77L96,95.15l-21-47a.61.61,0,0,1,0-.12A40.2,40.2,0,0,0,40,88,128.14,128.14,0,0,0,168,216,40.21,40.21,0,0,0,208,181.07Z"></path>
                </svg>
                {toPersianNumber("011-4492")}
              </div>
              
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}