'use client';

import { useEffect, useState } from 'react';
import { Questionnaire } from '@/components/onboarding';
import type { Locale } from '@/i18n-config';

interface Dictionary {
  onboarding: Record<string, string>;
}

interface QuestionsPageProps {
  params: Promise<{ locale: Locale }>;
}

export default function QuestionsPage({ params }: QuestionsPageProps) {
  const [dict, setDict] = useState<Dictionary | null>(null);
  const [locale, setLocale] = useState<string>('zh-CN');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function loadDictionary() {
      const { locale: loc } = await params;
      setLocale(loc);
      try {
        const response = await fetch(`/api/dictionary?locale=${loc}`);
        if (response.ok) {
          const dictionary = await response.json();
          setDict(dictionary);
        }
      } catch (error) {
        console.error('Failed to load dictionary:', error);
      } finally {
        setLoading(false);
      }
    }
    loadDictionary();
  }, [params]);

  if (loading || !dict) {
    return (
      <div className="min-h-screen bg-gradient-to-b from-pink-50 via-purple-50 to-white flex items-center justify-center">
        <div className="animate-pulse text-purple-600">Loading...</div>
      </div>
    );
  }

  return <Questionnaire dict={dict} locale={locale as Locale} />;
}