Add Surprise Me

Make the Surprise Me button choose one movie from the results already loaded on the current page. This keeps the feature instant and avoids a second recommendation service.

Step 1 — Add the handler

Inside FilterBar, receive the existing movies prop and return early when there are no results.

function surpriseMe() {
  if (movies.length === 0) return;

Step 2 — Pick one visible movie

Use a random array index and navigate directly to that movie’s detail route.

const pick = movies[Math.floor(Math.random() * movies.length)];
router.push(`/movie/${pick.id}`);

Step 3 — Connect the button

Point the existing button at the handler.

<button type="button" className="surprise-btn" onClick={surpriseMe}>
  Surprise me
</button>

Checkpoint

On /, click Surprise me. You should land on the detail page for one of the movies that was visible in the current grid.