Make the Detail Wishlist Button Interactive

Turn WatchlistButton into a real consumer of the context.

Step 1 — Read the shared state

In components/WatchlistButton.tsx, use useWishlist and derive whether this movie is currently saved.

const { isSaved, toggle } = useWishlist();
const saved = isSaved(movieId);

Step 2 — Toggle on click

Connect the existing button’s click handler to the shared toggle function.

onClick={() => toggle(movieId)}

Step 3 — Reflect the state in the label

Render On your wishlist when saved and Add to wishlist otherwise. Keep the existing CSS classes so the visual treatment follows the state without redesigning the component.

Checkpoint

Open a movie detail page and click the wishlist button. Its label should change immediately, and clicking it again should remove the movie.