import type { ReactNode } from "react";
import { notFound } from "next/navigation";
import BottomNav from "@/components/BottomNav";
import SiteFooter from "@/components/SiteFooter";
import SiteHeader from "@/components/SiteHeader";
import { getDictionary, getDirection, isLocale, locales, type Locale } from "@/lib/i18n";

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}

export default function LocaleLayout({
  children,
  params,
}: {
  children: ReactNode;
  params: { locale: string };
}) {
  if (!isLocale(params.locale)) {
    notFound();
  }

  const locale = params.locale as Locale;
  const dictionary = getDictionary(locale);

  return (
    <div dir={getDirection(locale)} className="site-shell">
      <SiteHeader locale={locale} common={dictionary.common} />
      <main className="page-content">{children}</main>
      <BottomNav locale={locale} common={dictionary.common} />
      <SiteFooter locale={locale} common={dictionary.common} />
    </div>
  );
}