fixed skip clue implimentation

app/(main)/map/page.js

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 "use client";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useSession } from "next-auth/react";
@@ -94,23 +95,30 @@ export default function MapPage() {
       });
 
       if (!response.ok) {
-        throw new Error("Failed to fetch clues");
+        // Extract the error message from the response if possible
+        const errorData = await response.json().catch(() => ({}));
+        console.error("API response details:", {
+          status: response.status,
+          statusText: response.statusText,
+          errorData,
+        });
+
+        throw new Error(
+          errorData.error ||
+            `Failed to fetch clues: ${response.status} ${response.statusText}`
+        );
       }
 
       const data = await response.json();
 
       // Process the clues to determine which are available
       // A clue is available if it's either found already or the next in sequence
-      const processedClues = data.map((clue, index, arr) => {
-        // Find the first unfound clue's index
-        const firstUnfoundIndex = arr.findIndex((c) => !c.found);
-
-        // A clue is available if:
-        // 1. It's already found, OR
-        // 2. It's the next unfound clue in the sequence
-        const available = clue.found || index === firstUnfoundIndex;
-
-        return { ...clue, available };
+      const processedClues = data.map((clue) => {
+        // The API now returns clues with availability already determined
+        return {
+          ...clue,
+          available: clue.available || clue.found || clue.skipped,
+        };
       });
 
       setClues(processedClues);
@@ -118,7 +126,8 @@ export default function MapPage() {
       return processedClues;
     } catch (err) {
       console.error("Failed to fetch clues:", err);
-      setError(err.message);
+      setError(err.message); // Make sure we set the error state
+      setLoading(false);
       return [];
     }
   }, []);
@@ -329,8 +338,8 @@ export default function MapPage() {
   // Function to determine clue button class based on status
   const getClueButtonClass = (clue) => {
     if (clue.found) return `${styles["clue-button"]} ${styles["clue-found"]}`;
-    if (clue.available)
-      return `${styles["clue-button"]} ${styles["clue-available"]}`;
+    if (clue.skipped) return `${styles["clue-button"]} ${styles["clue-skipped"]}`;
+    if (clue.available) return `${styles["clue-button"]} ${styles["clue-available"]}`;
     return `${styles["clue-button"]} ${styles["clue-locked"]}`;
   };