import { getLocale, getTranslations } from "next-intl/server";

export async function CurrentPlanBanner({
  plan,
  interval,
  currentPeriodEnd,
  cancelAtPeriodEnd,
}: {
  plan: string;
  interval: "month" | "year" | null;
  currentPeriodEnd: Date | null;
  cancelAtPeriodEnd: boolean;
}) {
  const t = await getTranslations("Settings.billing");
  const locale = await getLocale();
  const dateLocale = locale === "fr" ? "fr-FR" : locale === "es" ? "es-ES" : "en-US";
  const fmt = new Intl.DateTimeFormat(dateLocale, { dateStyle: "medium" });

  return (
    <div className="flex flex-col gap-1 rounded-lg border bg-muted/30 p-4">
      <div className="text-xs tracking-wider text-muted-foreground uppercase">
        {t("currentPlan")}
      </div>
      <div className="flex flex-wrap items-baseline gap-2">
        <span className="text-xl font-semibold capitalize">{plan}</span>
        {interval && (
          <span className="text-sm text-muted-foreground">
            {interval === "year" ? t("yearly") : t("monthly")}
          </span>
        )}
        {currentPeriodEnd && plan !== "free" && (
          <span className="ml-auto text-sm text-muted-foreground">
            {cancelAtPeriodEnd
              ? t("endsOn", { date: fmt.format(currentPeriodEnd) })
              : t("renewsOn", { date: fmt.format(currentPeriodEnd) })}
          </span>
        )}
      </div>
    </div>
  );
}