Approvals

import { useRef, useState } from "react"
import { ApprovalCard, type ApprovalStatus } from "@/components/ui/approvals"

export function ApprovalsDemo() {
  const [, setStage] = useState(0);
  const [approval, setApproval] = useState<ApprovalStatus>("pending");
  const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
  const later = (ms: number, fn: () => void) => timers.current.push(setTimeout(fn, ms));
  return (
    <ApprovalCard
              title="Delete 3 stale snapshot files"
              risk="high"
              description="These files are no longer referenced by any test. Deleting them cannot be undone from here."
              details={<ul className="grid gap-1 font-mono text-xs"><li>tests/__snapshots__/table.old.snap</li><li>tests/__snapshots__/tree.old.snap</li><li>tests/__snapshots__/thread.old.snap</li></ul>}
              status={approval}
              approveLabel="Delete"
              resolvedBy="You"
              resolvedAt="just now"
              onApprove={() => {
                setApproval("approved");
                later(500, () => setStage(4));
              }}
              onDeny={() => {
                setApproval("denied");
                later(500, () => setStage(4));
              }}
            />
  );
}