import './globals.css';
import type { Metadata } from 'next';
import type { CSSProperties } from 'react';
import { AppI18nProvider } from '@/lib/i18n/provider';
import { getServerAppLocale } from '@/lib/i18n/server';

export const metadata: Metadata = {
  title: 'Boardware Agent Sandbox',
  description: 'Boardware Agent Sandbox',
  icons: {
    icon: '/boardware-logo.jpg',
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const locale = getServerAppLocale();
  const taupeTheme = {
    '--background': '0 0% 99%',
    '--foreground': '0 0% 4%',
    '--card': '0 0% 100%',
    '--card-foreground': '0 0% 4%',
    '--popover': '0 0% 100%',
    '--popover-foreground': '0 0% 4%',
    '--primary': '15 16% 10%',
    '--primary-foreground': '0 0% 99%',
    '--secondary': '30 10% 94%',
    '--secondary-foreground': '15 16% 10%',
    '--muted': '24 9% 91%',
    '--muted-foreground': '20 8% 46%',
    '--accent': '30 8% 95%',
    '--accent-foreground': '15 16% 10%',
    '--border': '24 8% 88%',
    '--input': '0 0% 100%',
    '--ring': '18 9% 52%',
    '--radius': '1rem',
  } as CSSProperties;

  return (
    <html lang={locale} style={taupeTheme}>
      <body className="bg-background text-foreground">
        <AppI18nProvider initialLocale={locale}>{children}</AppI18nProvider>
      </body>
    </html>
  );
}
