import { notFound } from "next/navigation";
import { CrosswordRuntimePage } from "@/components/crossword-runtime-page";
import { LanguageSwitcher } from "@/components/language-switcher";
import { getDictionary, isLocale } from "@/lib/i18n";

type CrosswordPageProps = {
  params: Promise<{ locale: string; id: string }>;
};

export default async function CrosswordPage({ params }: CrosswordPageProps) {
  const { locale, id } = await params;
  if (!isLocale(locale)) {
    notFound();
  }

  const dict = getDictionary(locale);

  return (
    <main className="shell stack">
      <section className="card play-header">
        <div className="hero__topline">
          <span className="hero__badge">{dict.play.badge}</span>
          <LanguageSwitcher locale={locale} path={`/crosswords/${id}`} />
        </div>
        <h1 className="page-title">Progetto Enigma</h1>
        <p className="page-subtitle">{dict.play.subtitle}</p>
      </section>

      <CrosswordRuntimePage
        id={id}
        locale={locale}
        labels={{
          player: dict.player,
          clues: dict.clues,
          play: dict.play,
          loading: dict.play.loading,
          errorPrefix: dict.play.errorPrefix,
        }}
      />
    </main>
  );
}