import { ReactNode } from "react";
import { headers } from "next/headers";
import Header from "@/components/Header";
import { getCountryByCode } from "@/lib/countries";

import { WebSocketProvider } from "@/context/WebSocketContext";
import LanguageProvider from "@/context/LanguageProvider";
import { getMessages } from "next-intl/server";

interface LocaleLayoutProps {
  children: ReactNode;
  params: Promise<{
    locale: string;
  }>;
}

export default async function LocaleLayout({
  children,
  params,
}: LocaleLayoutProps) {
  const locale = await params;

  // Get country info from headers set by middleware
  const headersList = await headers();
  const countryCode = headersList.get("x-country-code") || "LU";
  const country = getCountryByCode(countryCode);

  const messages = await getMessages();

  return (
    <LanguageProvider locale={locale.locale} messages={messages}>
      <WebSocketProvider>
        <div className="min-vh-100 d-flex flex-column">
          <Header locale={locale.locale} />
          <main className="flex-grow-1">{children}</main>
        </div>
      </WebSocketProvider>
    </LanguageProvider>
  );
}

// Generate static params for all supported locales
export async function generateStaticParams() {
  return [
    { locale: "en" },
    { locale: "fr" },
    { locale: "de" },
    { locale: "it" },
    { locale: "pt" },
    { locale: "es" },
  ];
}
