import React from 'react';
import RecoilRootWrapper from '@app/recoil-root-wrapper';
import Topbar from '@/components/Topbar';
import { Inter } from 'next/font/google';
import { Box, MantineProvider } from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';
import { Notifications } from '@mantine/notifications';
import 'styles/globals.css';
import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';

export const metadata = {
  title: 'Siren',
  description: ''
};

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='en' className='h-full bg-white'>
      <head>
        <title>Siren</title>
      </head>
      <body className={`${inter.className} wrapper h-full`}>
        <RecoilRootWrapper>
          <MantineProvider>
            <Notifications />
            <ModalsProvider>
              <Topbar />
              <Box p='xl' pt='sm' className='h-full'>
                {children}
              </Box>
            </ModalsProvider>
          </MantineProvider>
        </RecoilRootWrapper>
      </body>
    </html>
  );
}
