import BookmarkIcon from "@mui/icons-material/Bookmark";
import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";

import { Search } from "@/types/types";
import { useBookmarksContext } from "@/context/BookmarkContext";

import classes from "./bookmarkbutton.module.css";

interface BookmarkButtonProps {
  movie: Search;
}

const BookmarkButton = ({ movie }: BookmarkButtonProps) => {
  const { toggleBookmark, isBookmark } = useBookmarksContext();

  return (
    <div
      className={classes.bookmarkbutton}
      onClick={() => {
        toggleBookmark(movie);
      }}
    >
      {" "}
      {isBookmark(movie) ? <BookmarkIcon /> : <BookmarkBorderIcon />}
    </div>
  );
};

export default BookmarkButton;