"use client";

import { Ban } from "lucide-react";
import { Alert } from "@/components/ui/alert";
import { useI18n, useT } from "@/i18n";
import { formatDateTime } from "@/lib/format";
import type { Order } from "@/types/order";

/**
 * Why this order was called off, and when.
 *
 * The back office writes that reason itself, in the cancel dialog, where it is described as the
 * one thing that answers "why was this cancelled?" weeks later — and then no screen showed it
 * back. A cancelled order read as cancelled and nothing more, so the answer existed in the
 * database and nowhere a person could reach it.
 *
 * Shown for a cancelled order only. The reason may be absent on an order called off before the
 * field existed, or through a path that never asked for one; the banner still appears, because
 * **when** it was cancelled is worth having on its own.
 */
export function CancellationNotice({ order }: { order: Order }) {
  const t = useT();
  const { locale } = useI18n();

  if (order.status !== "cancelled" && !order.cancelled_at) {
    return null;
  }

  return (
    <Alert
      variant="destructive"
      icon={Ban}
      title={
        order.cancelled_at
          ? t("orders.cancelled.titleAt", { at: formatDateTime(order.cancelled_at, locale) })
          : t("orders.cancelled.title")
      }
    >
      {order.cancel_reason ?? t("orders.cancelled.noReason")}
    </Alert>
  );
}