"use client";

const statusConfig: Record<string, { bg: string; text: string }> = {
  UNPAID: { bg: "bg-gray-100", text: "text-gray-700" },
  PARTIAL: { bg: "bg-orange-100", text: "text-orange-700" },
  PAID: { bg: "bg-green-100", text: "text-green-700" },
  OVERDUE: { bg: "bg-red-100", text: "text-red-700" },
};

const labels: Record<string, Record<string, string>> = {
  en: {
    UNPAID: "Unpaid",
    PARTIAL: "Partial",
    PAID: "Paid",
    OVERDUE: "Overdue",
  },
  ar: {
    UNPAID: "غير مدفوع",
    PARTIAL: "جزئي",
    PAID: "مدفوع",
    OVERDUE: "متأخر",
  },
};

interface PaymentStatusBadgeProps {
  status: string;
  lang: string;
}

export function PaymentStatusBadge({ status, lang }: PaymentStatusBadgeProps) {
  const config = statusConfig[status] || statusConfig.UNPAID;
  const label = (labels[lang] || labels.en)[status] || status;

  return (
    <span
      className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${config.bg} ${config.text}`}
    >
      {label}
    </span>
  );
}