import { getTranslations } from "next-intl/server";
import { Gift } from "lucide-react";
import SectionTitle from "@/components/shared/SectionTitle";
import { Package } from "@/types/package";

interface SubscribeHeaderProps {
  trialPackage?: Package | null;
}

export default async function SubscribeHeader({
  trialPackage,
}: SubscribeHeaderProps) {
  const t = await getTranslations("SubscribePage");

  if (!trialPackage) {
    return (
      <SectionTitle className="text-secondary-dark">{t("title")}</SectionTitle>
    );
  }

  return (
    <div className="flex flex-col gap-5">
      <SectionTitle className="text-secondary-dark">
        {t("trialTitle")}
      </SectionTitle>
      <div className="flex items-start sm:items-center gap-3 sm:gap-4 rounded-[16px] border border-secondary-light bg-vanilla-glass p-4 sm:p-5">
        <span className="flex items-center justify-center shrink-0 size-10 sm:size-12 rounded-full bg-secondary-32">
          <Gift className="size-5 sm:size-6 text-secondary-main" />
        </span>
        <div className="flex flex-col gap-1">
          <p className="text-[16px] sm:text-[20px] font-bold">
            {t("trialNoticeTitle", {
              days: trialPackage.free_package_days_count ?? 0,
            })}
          </p>
          <p className="text-[13px] sm:text-[15px] text-white/80">
            {t("trialNoticeDescription")}
          </p>
        </div>
      </div>
    </div>
  );
}