import { notFound } from "next/navigation";
import { CrosswordConfigForm } from "@/components/crossword-config-form";
import { LanguageSwitcher } from "@/components/language-switcher";
import { getDictionary, isLocale } from "@/lib/i18n";

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

export default async function NewCrosswordPage({ params }: NewCrosswordPageProps) {
  const { locale } = await params;
  if (!isLocale(locale)) {
    notFound();
  }

  const dict = getDictionary(locale);

  return (
    <main className="shell stack">
      <section className="hero">
        <div className="hero__topline">
          <span className="hero__badge">{dict.newPage.badge}</span>
          <LanguageSwitcher locale={locale} path="/new" />
        </div>
        <h1 className="page-title">{dict.newPage.title}</h1>
        <p className="page-subtitle">{dict.newPage.subtitle}</p>
      </section>

      <section className="card panel">
        <CrosswordConfigForm locale={locale} dict={dict.form} />
      </section>
    </main>
  );
}