import type { OrderPaymentSplit } from "@/lib/api/orders";
import { formatRupiah } from "@/lib/orders/format";

type DetailPesananPaymentsTableProps = {
  items: OrderPaymentSplit[];
};

export function DetailPesananPaymentsTable({
  items,
}: DetailPesananPaymentsTableProps) {
  return (
    <div className="-mx-5 min-w-0 overflow-x-auto px-5">
      <table className="min-w-[640px] w-full border-collapse">
        <thead>
          <tr>
            <th className="text-m-medium w-10 bg-neutral-20 px-3 py-2 text-center text-neutral-100">
              #
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Tipe
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Metode Pembayaran
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Tagihan
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Nominal Split
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Sisa Tagihan
            </th>
          </tr>
        </thead>
        <tbody>
          {items.length === 0 ? (
            <tr>
              <td
                colSpan={6}
                className="text-m-regular px-3 py-8 text-center text-neutral-80"
              >
                Belum ada riwayat split pembayaran.
              </td>
            </tr>
          ) : (
            items.map((item, index) => (
              <tr
                key={item.id}
                className="border-b border-neutral-20 last:border-0"
              >
                <td className="text-m-regular px-3 py-3 text-center align-top text-neutral-100">
                  {index + 1}
                </td>
                <td className="text-m-regular px-3 py-3 align-top text-neutral-100">
                  {item.typeLabel}
                </td>
                <td className="text-m-regular px-3 py-3 align-top text-neutral-100">
                  {item.paymentMethodName}
                </td>
                <td className="text-m-regular px-3 py-3 align-top text-neutral-100">
                  {formatRupiah(item.billAmount)}
                </td>
                <td className="text-m-regular px-3 py-3 align-top text-neutral-100">
                  {formatRupiah(item.splitAmount)}
                </td>
                <td className="text-m-regular px-3 py-3 align-top text-neutral-100">
                  {formatRupiah(item.remainingAmount)}
                </td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}