"use client";

const t = {
  en: {
    penalty: "Late Penalty",
    daysOverdue: "days overdue",
    dayOverdue: "day overdue",
  },
  ar: {
    penalty: "غرامة تأخير",
    daysOverdue: "أيام تأخير",
    dayOverdue: "يوم تأخير",
  },
};

interface OverduePenaltyIndicatorProps {
  penaltyAmount: number;
  currency: string;
  daysOverdue: number;
  lang: string;
}

export function OverduePenaltyIndicator({
  penaltyAmount,
  currency,
  daysOverdue,
  lang,
}: OverduePenaltyIndicatorProps) {
  const isAr = lang === "ar";
  const labels = isAr ? t.ar : t.en;

  if (penaltyAmount <= 0) return null;

  return (
    <div
      dir={isAr ? "rtl" : "ltr"}
      className="inline-flex items-center gap-1.5 px-2 py-1 bg-red-50 border border-red-200 rounded text-xs text-red-700"
    >
      <svg
        className="w-3.5 h-3.5 flex-shrink-0"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
        />
      </svg>
      <span className="font-medium">
        {labels.penalty}: {currency} {penaltyAmount.toLocaleString()}
      </span>
      <span className="text-red-500">
        ({daysOverdue}{" "}
        {daysOverdue === 1 ? labels.dayOverdue : labels.daysOverdue})
      </span>
    </div>
  );
}