'use client'; // Mark as a Client Component
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { query } from '../../../lib/db';

export default function TeamSelection() {
    const [teamCode, setTeamCode] = useState('');
    const [error, setError] = useState('');
    const router = useRouter();

    const handleJoinTeam = async (e) => {
        e.preventDefault();
        const team = await query('SELECT * FROM teams WHERE code = ?', [teamCode]);
        if (team) {
            router.push(`/stats/${team.id}`);
        } else {
            setError('Team not found');
        }
    };

    return (
        <div>
            <h1>Team Selection</h1>
            <form onSubmit={handleJoinTeam}>
                <input
                    type="text"
                    placeholder="Team Code"
                    value={teamCode}
                    onChange={(e) => setTeamCode(e.target.value)}
                    required
                />
                <button type="submit">Join Team</button>
            </form>
            {error && <p style={{ color: 'red' }}>{error}</p>}
            <p>
                <a href="/create-team">Create a new team</a>
            </p>
        </div>
    );
}