import React from 'react';
import { getMessages } from 'next-intl/server';
import localFont from 'next/font/local';
import Providers from '@/components/Providers';
import ServiceWorkerRegister from '@/components/ServiceWorkerRegister';
import '@/css/tailwind.css';
import { headers } from 'next/headers';

const inter = localFont({
  src: '../fonts/Inter-Variable.woff2',
  variable: '--font-inter',
  display: 'swap',
});

const manrope = localFont({
  src: '../fonts/Manrope-Variable.woff2',
  variable: '--font-manrope',
  display: 'swap',
});

export const metadata = {
  title: 'N3WT-SCHOOL',
  description: "Gestion de l'école",
  manifest: '/manifest.webmanifest',
  appleWebApp: {
    capable: true,
    statusBarStyle: 'default',
    title: 'N3WT School',
  },
  icons: {
    icon: [
      {
        url: '/favicon.svg',
        type: 'image/svg+xml',
      },
      {
        url: '/favicon.ico',
        sizes: 'any',
      },
    ],
    apple: '/icons/icon.svg',
  },
};

export default async function RootLayout({ children, params }) {
  const headersList = headers();
  const locale = headersList.get('x-locale') || 'fr';
  const messages = await getMessages(locale);

  return (
    <html lang={locale}>
      <body className={`p-0 m-0 font-body ${inter.variable} ${manrope.variable}`}>
        <Providers messages={messages} locale={locale} session={params.session}>
          {children}
        </Providers>
        <ServiceWorkerRegister />
      </body>
    </html>
  );
}
