"use client";

import { useContext } from "react";
import { FavoriteContext } from "./FavoriteContext";

export default function FavoriteBtn({ movie }: any) {
  const { favorites,
    dispatch
    //  setFavorites 
    } = useContext(FavoriteContext);
  const filteredFavorites = favorites.filter((f) => f.imdbID != movie.imdbID);
  const isFavorite =
    favorites.filter((f) => f.imdbID == movie.imdbID).length == 1;

  return (
    <button
      onClick={() => {
        if (isFavorite) {
          dispatch({type:'Remove', payload: movie})
          // setFavorites([...filteredFavorites]);
        } else {
          dispatch({type:'Add', payload: movie})
          // setFavorites([...favorites, movie]);
        }
      }}
      className={`block text-yellow-500 rounded my-auto h-8 w-8
      ${
        isFavorite ? " bg-black" : "border-2 border-gray-300 bg-white"
      }`}
    >
      ★
    </button>
  );
}