"use client";

import { useLanguage } from "@/context/LanguageContext";

type Props = {
  centered?: boolean;
};

export default function OffersSectionHeader({ centered = true }: Props) {
  const { lang, t } = useLanguage();

  return (
    <div className={`${centered ? "text-center" : lang === "ar" ? "text-right" : "text-left"} relative z-10`}>
      <div className="flex justify-center mb-3">
        <span className="inline-flex items-center justify-center rounded-full border border-[#FF4F93] bg-white px-4 py-1 text-xs md:text-sm font-medium text-[#FF4F93] shadow-sm">
          {t("offers")}
        </span>
      </div>

      <h2 className="text-[28px] md:text-[44px] font-extrabold leading-[1.2] text-[#2E3553] tracking-[-0.02em]">
        {lang === "ar" ? (
          <>
            عروض مغرية <span className="text-[#FF3D8E]">لفترة محدودة.</span>
          </>
        ) : (
          <>
            Irresistible offers <span className="text-[#FF3D8E]">for a limited time.</span>
          </>
        )}
      </h2>
    </div>
  );
}