SCANNER WORKS!!! JUST ADD THE MORE CLUE BUTTONS !!! AND NEXT CLUE ERROR CHECKING

components/QRScanner.js

@@ -1,6 +1,6 @@
 "use client";
 import { useState, useEffect } from "react";
-import { Scanner } from "@yudiel/react-qr-scanner";
+import QrScanner from "@yudiel/react-qr-scanner"; // Correct import
 
 export default function QRScanner({ onScan, width = 300, height = 300 }) {
   const [error, setError] = useState(null);
@@ -39,8 +39,37 @@ export default function QRScanner({ onScan, width = 300, height = 300 }) {
   }, []);
 
   const handleDecode = (result) => {
-    if (onScan && result) {
-      onScan(result);
+    console.log("QR scan result:", result);
+
+    if (!onScan || !result) return;
+
+    try {
+      // Handle different result formats
+      if (result && typeof result === "object") {
+        if (result.text) {
+          onScan(result.text);
+          return;
+        }
+        if (result.data) {
+          onScan(result.data);
+          return;
+        }
+        if (result.toString && typeof result.toString === "function") {
+          const stringValue = result.toString();
+          if (stringValue !== "[object Object]") {
+            onScan(stringValue);
+            return;
+          }
+        }
+      } else if (typeof result === "string") {
+        onScan(result);
+        return;
+      }
+
+      // Last resort
+      onScan(String(result));
+    } catch (err) {
+      console.error("Error processing QR scan result:", err);
     }
   };
 
@@ -112,8 +141,8 @@ export default function QRScanner({ onScan, width = 300, height = 300 }) {
       )}
 
       <div className="scanner-container" style={{ width, height }}>
-        <Scanner
-          onResult={handleDecode}
+        <QrScanner
+          onDecode={handleDecode} // Using onDecode instead of onResult
           onError={handleError}
           constraints={{
             facingMode: "environment",
@@ -131,6 +160,7 @@ export default function QRScanner({ onScan, width = 300, height = 300 }) {
             width: "100%",
             height: "100%",
           }}
+          scanDelay={300} // Faster scanning
         />
       </div>