"use client";

import DataTable, { TableColumn } from "../ui/Table";
import { WorkflowRequestItem } from "@/types/api";
import StatusBadge from "./StatusBadge";

type ApprovalTableProps = {
  data: WorkflowRequestItem[];
  onApprove: (request: WorkflowRequestItem) => void;
  onReject: (request: WorkflowRequestItem) => void;
};

export default function ApprovalTable({ data, onApprove, onReject }: ApprovalTableProps) {
  const columns: TableColumn<WorkflowRequestItem>[] = [
    { key: "resourceType", header: "Resource Type" },
    { key: "resourceId", header: "Resource Id" },
    { key: "makerUsername", header: "Maker" },
    { key: "status", header: "Status", render: (row) => <StatusBadge status={row.status} /> },
    {
      key: "actions",
      header: "Actions",
      render: (row) => (
        <div className="d-flex gap-2">
          <button className="btn btn-success btn-sm" onClick={() => onApprove(row)}>
            Approve
          </button>
          <button className="btn btn-danger btn-sm" onClick={() => onReject(row)}>
            Reject
          </button>
        </div>
      )
    }
  ];

  return <DataTable columns={columns} data={data} />;
}