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

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

export default async function CrosswordSolutionPage({ params }: CrosswordSolutionPageProps) {
  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.solution.badge}</span>
          <LanguageSwitcher locale={locale} path={`/crosswords/${id}/solution`} />
        </div>
        <h1 className="page-title">Progetto Enigma</h1>
        <p className="page-subtitle">{dict.solution.subtitle}</p>
      </section>

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