"use client";

import { useFormState, useFormStatus } from "react-dom";
import { revelarCpfAction, type AdminActionState } from "@/app/(admin)/admin/actions";
import { Button } from "@/components/ui/button";

const initialState: AdminActionState = { ok: false };

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <Button type="submit" variant="outline" disabled={pending}>
      {pending ? "Registrando..." : "Mostrar CPF"}
    </Button>
  );
}

export function MostrarCpf({ clienteId }: { clienteId: string }) {
  const action = revelarCpfAction.bind(null, clienteId);
  const [state, formAction] = useFormState(action, initialState);

  return (
    <form action={formAction} className="space-y-2">
      <SubmitButton />
      {state.value ? <p className="text-sm font-medium">{state.value}</p> : null}
    </form>
  );
}