import type { PaymentMethod } from "@/lib/api/payment-methods";
import { MaterialIcon } from "../icons/nav-icons";
import { ActionIconButton } from "../ui/button";

type MetodePembayaranTableProps = {
  items: PaymentMethod[];
  startIndex: number;
  onEdit: (item: PaymentMethod) => void;
  onDelete: (item: PaymentMethod) => void;
};

export function MetodePembayaranTable({
  items,
  startIndex,
  onEdit,
  onDelete,
}: MetodePembayaranTableProps) {
  return (
    <table className="min-w-[760px] w-full border-collapse">
        <thead>
          <tr className="overflow-hidden rounded-md">
            <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">
              Bank
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Pemilik Rekening
            </th>
            <th className="w-[84px] bg-neutral-20" />
          </tr>
        </thead>
        <tbody>
          {items.length === 0 ? (
            <tr>
              <td
                colSpan={5}
                className="text-m-regular px-3 py-8 text-center text-neutral-80"
              >
                Belum ada data metode 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-2 text-center align-top text-neutral-100">
                  {startIndex + index + 1}
                </td>
                <td className="text-m-regular px-3 py-2 align-top text-neutral-100">
                  {item.type}
                </td>
                <td className="text-m-regular px-3 py-2 align-top text-neutral-100">
                  <p>{item.bank}</p>
                  <p className="text-s-regular text-neutral-80">
                    No Rekening: {item.accountNumber}
                  </p>
                </td>
                <td className="text-m-regular px-3 py-2 align-top text-neutral-100">
                  {item.accountHolder}
                </td>
                <td className="px-3 py-2 align-top">
                  <div className="flex items-center justify-center gap-1">
                    <ActionIconButton
                      variant="danger"
                      onClick={() => onDelete(item)}
                      aria-label={`Hapus metode ${item.type}`}
                      icon={<MaterialIcon name="delete" size={16} />}
                    />
                    <ActionIconButton
                      onClick={() => onEdit(item)}
                      aria-label={`Edit metode ${item.type}`}
                      icon={<MaterialIcon name="edit" size={16} />}
                    />
                  </div>
                </td>
              </tr>
            ))
          )}
        </tbody>
    </table>
  );
}