peworkshop/app/(main)/scan/page.js

'use client'; // Mark as a Client Component
import { useState } from 'react';
import QRScanner from '../../../components/QRScanner';
import { useSession } from 'next-auth/react';

export default function Scan() {
    const { data: session } = useSession();
    const [message, setMessage] = useState('');

    const handleScan = async (clueId) => {
        const response = await fetch('/api/mark-clue', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ clueId, teamId: session.user.teamId }),
        });

        if (response.ok) {
            setMessage('Clue marked as found!');
        } else {
            setMessage('Error marking clue.');
        }
    };

    return (
        <div>
            <h1>Scan QR Code</h1>
            <QRScanner onScan={handleScan} />
            {message && <p>{message}</p>}
        </div>
    );
}