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

import { PortalButton } from "./portal-button";

export async function PastDueBanner() {
  const t = await getTranslations("Settings.billing");
  return (
    <div className="flex items-center justify-between gap-4 rounded-lg border border-destructive/40 bg-destructive/10 p-4">
      <div className="flex flex-col gap-1">
        <div className="text-sm font-semibold text-destructive">{t("pastDueTitle")}</div>
        <div className="text-xs text-muted-foreground">{t("pastDueDescription")}</div>
      </div>
      <PortalButton />
    </div>
  );
}