'use client';

import { useState } from 'react';

type Props = {
  id: number;
  favorite: boolean;
};

const FavoriteButton: React.FC<Props> = ({ id, favorite }) => {
  const [isFav, setIsFav] = useState(favorite);

  function toggle() {
    fetch(`/api/books/${id}`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ favorite: !isFav }),
    }).then(() => setIsFav(!isFav));
  }

  return (
    <button onClick={toggle} className="border rounded px-2">
      {isFav ? '★ Favorit' : '☆ Zu Favoriten'}
    </button>
  );
};

export default FavoriteButton;
