import React from "react";
import { formatNumber } from "@/lib/debt-intelligence-utils";

interface CurrencyBreakdownTableProps {
  title: string;
  data: Record<string, number>;
  bgColor: string;
  textColor: string;
  emptyMessage: string;
}

export const CurrencyBreakdownTable: React.FC<CurrencyBreakdownTableProps> = ({
  title,
  data,
  bgColor,
  textColor,
  emptyMessage,
}) => {
  return (
    <div className="rounded-lg border border-slate-200 bg-white shadow-sm overflow-hidden">
      <div className={`p-4 ${bgColor} border-b border-slate-200`}>
        <h3 className="text-sm font-semibold text-slate-900">
          {title}
        </h3>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-slate-200 bg-slate-50">
              <th className="px-4 py-3 text-left font-semibold text-slate-700">
                Currency
              </th>
              <th className="px-4 py-3 text-right font-semibold text-slate-700">
                Total {title.includes("Income") ? "Income" : "Expense"}
              </th>
            </tr>
          </thead>
          <tbody>
            {Object.entries(data).map(([currency, amount]) => (
              <tr
                key={currency}
                className="border-b border-slate-100 hover:bg-slate-50 transition-colors"
              >
                <td className="px-4 py-3 text-slate-700 font-medium">
                  {currency === '' || currency === 'null' ? 'Other' : currency}
                </td>
                <td className={`px-4 py-3 text-right font-medium ${textColor}`}>
                  {formatNumber(Math.abs(amount))}
                </td>
              </tr>
            ))}
            {Object.keys(data).length === 0 && (
              <tr>
                <td colSpan={2} className="px-4 py-3 text-center text-slate-500">
                  {emptyMessage}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
};