import Image from "next/image";
import { useTranslation } from "react-i18next";
import { PhoneIcon } from "@heroicons/react/24/solid";
import { useHome } from "@/context/helpers/Home/HomeContext";

// Header contact info and mobile search icon
export default function NavbarContactInfo() {
  const { t, i18n } = useTranslation("header");
  const isRtl = i18n.dir() === "rtl";
  const { contactNumber } = useHome();

  if (!contactNumber) {
    return null;
  }

  return (
    <>
      {/* Contact info (visible on lg+) */}
      <div className="items-center hidden cursor-pointer lg:flex lg:gap-1 xl:gap-2">
        <PhoneIcon
          aria-label={t("a11y.phoneAlt")}
          className={`w-[24.59px] h-[24.59px] text-mainColor ${
            isRtl ? "-scale-x-100" : ""
          }`}
        />
        <a
          href={`tel:${contactNumber}`}
          className="pt-4 font-bold leading-relaxed lg:text-xs xl:text-sm "
        >
          {contactNumber}
        </a>
      </div>

      {/* Divider */}
      <div
        className="w-px h-10 bg-[#E5E5E5] my-2 hidden lg:block"
        aria-hidden="true"
      />
    </>
  );
}