import React from "react";
import { formatStatusLabel } from "../utils/statusBadge.js";

/**
 * @param {{
 *   items: Array<Record<string, unknown>>,
 *   onSign: (stepId: number, action: 'approve' | 'reject') => void,
 * }} props
 */
const ApprovalQueue = ({ items, onSign }) => {
  if (!items.length) {
    return <p className="swi-muted">No pending approval steps.</p>;
  }

  return (
    <ul className="swi-list-approval">
      {items.map((row) => (
        <li key={row.id} className="swi-approval-row">
          <div className="swi-approval-row__title">{row.document_title}</div>
          <div className="swi-approval-row__meta">
            Step {row.step_order}: {row.role_name} · Assigned: {row.assignee_name}
          </div>
          <div className="swi-approval-row__meta">
            Doc {formatStatusLabel(row.document_status)} · v{row.version_label}
          </div>
          <div className="swi-inline-actions">
            <button
              type="button"
              className="swi-btn swi-btn--primary"
              onClick={() => onSign(Number(row.id), "approve")}
            >
              E-sign approve
            </button>
            <button
              type="button"
              className="swi-btn swi-btn--danger"
              onClick={() => onSign(Number(row.id), "reject")}
            >
              Reject
            </button>
          </div>
        </li>
      ))}
    </ul>
  );
};

export default ApprovalQueue;
