'use client';

import { startTransition, useActionState } from 'react';
import { deleteBook } from './book.actions';

type Props = { id: number };

const DeleteButton: React.FC<Props> = ({ id }) => {
  const [error, action, pending] = useActionState(deleteBook, '');

  return (
    <>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button
        onClick={() => startTransition(() => action(id))}
        disabled={pending}
      >
        {pending ? 'Löschen...' : 'Löschen'}
      </button>
    </>
  );
};

export default DeleteButton;
