import { useI18n } from "../../shared/I18nProvider.jsx";
import { approvalDisplay } from "./approval-display.js";

export function ApprovalCard({ approval, onDecision, decisionPending }) {
  const { t } = useI18n();
  const display = approvalDisplay(approval, t);
  return <article className="approval-card"><div><strong>{display.title}</strong><span>{decisionPending ? t("approval.resolving") : display.status}</span></div><p>{display.reason}</p><pre>{display.commandPreview}</pre>
    {approval.status === "pending" && <div className="approval-actions">
      <button disabled={decisionPending} onClick={() => onDecision(approval, "rejected")}>{t("approval.reject")}</button>
      <button disabled={decisionPending} onClick={() => onDecision(approval, "approved")}>{t("approval.approveOnce")}</button>
      {approval.canApproveForSession && <button disabled={decisionPending} onClick={() => onDecision(approval, "approved_for_session")}>{t("approval.approveSession")}</button>}
      {approval.canApproveAlways && <button disabled={decisionPending} onClick={() => onDecision(approval, "approved_always")}>{t("approval.approveAlways")}</button>}
    </div>}
  </article>;
}
