import React from "react";
import Menu from "../menu/Menu";
import {DefaultMenuLinks} from "@/constants/menu/menu.const";
import Link from "next/link";
import Image from "next/image";
import TelephoneSvg from "../icons/TelephoneSvg";
import CustomLink from "../global/CustomLink";
import Dropdown from "../global/dropdown";
import {toPersianNumber} from "@/utils/functions";
import {site_languages} from "@/constants";

export default function TopMenu() {
  return (
    <div className="bg-blue-primary container  flex items-center justify-between border-b-[#eee]">
      <div className="flex gap-x-10 transition-all duration-300 justify-between items-center">
        <Link href={"/"} className="flex items-center gap-x-2">
          <div className="relative h-[70px] w-[87px]">
            <Image
              loading="lazy"
              src="/main-logo.png"
              fill
              alt="shomal hospital"
              style={{color: "transparent", fill: "red", objectFit: "contain"}}
            />
          </div>
        </Link>
        <span className="inline-block h-full min-h-[80px] w-[1px] bg-white"></span>
        <Menu direction="horizontal" items={DefaultMenuLinks} />
      </div>
      <div className="flex items-center gap-x-1">
        <a
          href="tel:0114492"
          className="text-white relative group  flex items-end hover:bg-blue-primary p-3 hover:text-white transition-all rounded-xl"
        >
          <span className="hidden group-hover:block absolute left-3 h-[24px] w-[24px] animate-ping rounded-xl bg-white opacity-35"></span>

          <span className="font-bold text-xl">
            {toPersianNumber("011-4492")}
          </span>
          <span className="group-hover:animate-pulse">
            <TelephoneSvg size="28" />
          </span>
        </a>
        <Dropdown options={site_languages} />
        <CustomLink
          href="/dashboard"
          label="ورود به حساب"
          className="bg-white text-blue-primary rounded-xl py-3 px-6 text-sm font-semibold"
        />
      </div>
    </div>
  );
}
