'use client';
import { useEffect, Suspense } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';

export default function Quiz() {
  return (
    <Suspense fallback={<div className="flex items-center justify-center min-h-screen">
      <div className="text-center">
        <h1 className="text-2xl font-bold mb-4">Зареждане...</h1>
      </div>
    </div>}>
      <QuizWithSearch />
    </Suspense>
  );
}

function QuizWithSearch() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const quizId = searchParams?.get('id');

  useEffect(() => {
    // If there's a quiz ID in the query parameters, redirect to the new path-based URL
    if (quizId) {
      router.replace(`/quiz/${quizId}`);
    }
  }, [quizId, router]);

  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="text-center">
        <h1 className="text-2xl font-bold mb-4">Куиз</h1>
        <p className="text-gray-600">Моля, използвайте линка, който ви е предоставен от организатора.</p>
      </div>
    </div>
  );
}