"use client";
import { useLocale, useTranslations } from "next-intl";
import Logo from "@/components/shared/Header/Logo";
import { MdArrowBack, MdArrowForward } from "react-icons/md";
import { Button } from "@/components/ui/button";
import { Link } from "@/i18n/navigation";

export default function SubscribePageHeader() {
  const locale = useLocale();
  const t = useTranslations("SubscribePage");
  const isArabic = locale === "ar";
  const ArrowIcon = isArabic ? MdArrowBack : MdArrowForward;

  return (
    <header className="relative top-0 z-50 my-5 mx-5 sm:my-6 sm:mx-6 md:my-8 md:mx-12 lg:my-10 lg:mx-20 px-5 py-5 sm:px-6 sm:py-6">
      <div className="flex items-center justify-between gap-4">
        <Logo />
        <Button asChild>
          <Link href="/">
            <span>{t("backToSite")}</span>
            <ArrowIcon className="size-6 text-primary-main" />
          </Link>
        </Button>
      </div>
    </header>
  );
}