deletePerson

async function deletePerson(
  prevState: PersonPrevState,
  formData: FormData
): Promise<PersonPrevState>

const id = formData.get("id");
if (!id) {
  return {
    error: "ID is required",
  };
}

import { useActionState } from "react";
import deletePerson from "@/lib/actions/people/deletePerson";

function DeletePersonButton({ personId }: { personId: string }) {
  const [state, formAction] = useActionState(deletePerson, {});
  
  return (
    <form action={formAction}>
      <input type="hidden" name="id" value={personId} />
      <button type="submit" className="danger">Delete Person</button>
      {state.error && <p className="error">{state.error}</p>}
      {state.success && <p className="success">Person deleted!</p>}
    </form>
  );
}

function PersonList({ people }) {
  const handleDelete = async (personId: string, name: string) => {
    if (!confirm(`Are you sure you want to delete ${name}?`)) {
      return;
    }
    
    const formData = new FormData();
    formData.set("id", personId);
    const result = await deletePerson({}, formData);
    
    if (result.success) {
      console.log("Person deleted");
    } else {
      alert(result.error);
    }
  };
  
  return (
    <ul>
      {people.map((person) => (
        <li key={person.id}>
          {person.name} - {person.phone}
          <button onClick={() => handleDelete(person.id, person.name)}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}