'use client';

import { useActionState } from 'react';
import { retryWebhookEventAction } from '../app/actions';

type Props = {
  eventId: string;
};

type FormState = {
  error?: string;
  success?: string;
};

const initialState: FormState = {};

export function WebhookRetryForm({ eventId }: Props) {
  const [state, action, pending] = useActionState(retryWebhookEventAction, initialState);

  return (
    <form action={action} className="retry-form">
      <input type="hidden" name="eventId" value={eventId} />
      <button type="submit" className="secondary-button" disabled={pending}>
        {pending ? 'Retrying...' : 'Retry Event'}
      </button>
      {state.error ? <p className="form-error">{state.error}</p> : null}
      {state.success ? <p className="form-success">Event requeued.</p> : null}
    </form>
  );
}
