import { Badge } from "@workspace/ui/components/badge";
import { useTranslation } from "react-i18next";
import { Display } from "@/components/display";

interface PromoInfoProps {
  discount?: API.SubscribeDiscount;
}

export function PromoInfo({ discount }: Readonly<PromoInfoProps>) {
  const { t } = useTranslation("subscribe");
  const promo = discount?.promo;

  if (!promo) return null;

  return (
    <div className="flex flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/40 p-3 text-sm">
      <div className="grid gap-1">
        <span className="font-medium">
          {promo.rule_name || t("promo.available", "Promo Available")}
        </span>
        {promo.end_time && (
          <span className="text-muted-foreground text-xs">
            {t("promo.validUntil", "Valid until")}:{" "}
            {new Date(promo.end_time * 1000).toLocaleString()}
          </span>
        )}
      </div>
      <Badge variant="secondary">
        <Display type="currency" value={promo.promo_price} />
      </Badge>
    </div>
  );
}