"use client";
import { Button } from "@/components/ui/button";
import { Link, useRouter, usePathname } from "@/i18n/navigation";
import { useLocale, useTranslations } from "next-intl";
import { LuPhoneCall } from "react-icons/lu";

export default function DesktopActions() {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  const t = useTranslations("Header");

  const toggleLanguage = () => {
    const newLocale = locale === "ar" ? "en" : "ar";
    router.replace(pathname, { locale: newLocale });
  };

  const displayText = locale === "ar" ? "ENG" : "عربي";

  const handleContactClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    const element = document.querySelector("#contact-us");
    if (element) {
      e.preventDefault();
      element.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  };

  return (
    <div className="hidden lg:flex items-center gap-3">
      <Button variant="outline" onClick={toggleLanguage}>
        {displayText}
      </Button>
      <Button variant="default" size="icon" asChild>
        <Link href="/#contact-us" onClick={handleContactClick}>
          {locale === "ar" ? (
            <>
              <span>{t("contactUs")}</span>
              <LuPhoneCall className="size-4.5" />
            </>
          ) : (
            <>
              <LuPhoneCall className="size-4.5" />
              <span>{t("contactUs")}</span>
            </>
          )}
        </Link>
      </Button>
    </div>
  );
}