import type { BillingInvoiceRow } from "@/lib/queries/billing-queries";

interface InvoiceTableProps {
  invoices: BillingInvoiceRow[];
}

const statusClass: Record<string, string> = {
  paid: "text-success",
  open: "text-warning",
  failed: "text-danger",
};

export function InvoiceTable({ invoices }: InvoiceTableProps) {
  if (invoices.length === 0) {
    return (
      <p className="py-8 text-center text-sm text-muted">
        No invoices yet. Invoices appear after your first payment.
      </p>
    );
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full min-w-[480px] text-left text-sm">
        <thead>
          <tr className="border-b border-border text-xs font-semibold text-muted">
            <th className="px-4 py-2.5">Date</th>
            <th className="px-4 py-2.5">Amount</th>
            <th className="px-4 py-2.5">Status</th>
          </tr>
        </thead>
        <tbody>
          {invoices.map((inv) => (
            <tr key={inv.id} className="border-b border-border/60">
              <td className="px-4 py-2.5">
                {inv.issuedAt.toLocaleDateString("en-US", {
                  month: "short",
                  day: "numeric",
                  year: "numeric",
                })}
              </td>
              <td className="px-4 py-2.5 font-mono text-xs">
                ${(inv.amountCents / 100).toFixed(2)} {inv.currency}
              </td>
              <td
                className={`px-4 py-2.5 text-xs font-bold capitalize ${statusClass[inv.status] ?? "text-muted"}`}
              >
                {inv.status}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}