Approval card

'use client';

import * as React from 'react';
import { ApprovalCard, type ApprovalStatus } from './approval-card';

const DETAILS = [
  { label: 'Folder', value: 'Marketing / Drafts' },
  { label: 'Oldest draft', value: 'March 2, 2026' },
  { label: 'Size', value: '3.4 MB' },
];

type Cards = { a: ApprovalStatus; b: ApprovalStatus; c: ApprovalStatus };
const PENDING: Cards = { a: 'pending', b: 'pending', c: 'pending' };

export default function ApprovalCardDemo({ replay = 0 }: { replay?: number }) {
  const [status, setStatus] = React.useState<Cards>(PENDING);
  // The countdowns start when the demo starts or replays; the third one is short so that it can lapse.
  const [times, setTimes] = React.useState(() => ({ a: Date.now() + 45_000, c: Date.now() + 90_000 }));

  const set = React.useCallback(
    (key: keyof Cards, value: ApprovalStatus) => setStatus((now) => ({ ...now, [key]: value })),
    [],
  );

  // Replay resets all three to pending, approves the first, declines the second and lets the third lapse.
  React.useEffect(() => {
    if (replay === 0) return;
    setStatus(PENDING);
    setTimes({ a: Date.now() + 45_000, c: Date.now() + 9_000 });
    const timers = [
      window.setTimeout(() => set('a', 'approved'), 2000),
      window.setTimeout(() => set('b', 'denied'), 3800),
    ];
    return () => {
      for (const t of timers) window.clearTimeout(t);
    };
  }, [replay, set]);

  return (
    <div className="flex w-full max-w-[400px] flex-col gap-4">
      <ApprovalCard
        title="Delete 4 old drafts"
        description="These drafts are in the shared Marketing folder and have not changed for 90 days."
        details={DETAILS}
        reason="Deleting files needs your approval in this workspace."
        status={status.a}
        expiresAt={times.a}
        onApprove={() => set('a', 'approved')}
        onDeny={() => set('a', 'denied')}
        onExpire={() => set('a', 'expired')}
      />
      <ApprovalCard
        title="Remove 12 guests from the list"
        description="They did not reply to the invite for the team dinner."
        reason="Removing guests sends each of them an email."
        approveLabel="Remove guests"
        destructive
        status={status.b}
        onApprove={() => set('b', 'approved')}
        onDeny={() => set('b', 'denied')}
      />
      <ApprovalCard
        title="Send the invoice to Pinewood Labs"
        status={status.c}
        expiresAt={times.c}
        onApprove={() => set('c', 'approved')}
        onDeny={() => set('c', 'denied')}
        onExpire={() => set('c', 'expired')}
      />
    </div>
  );
}