import type { Metadata } from 'next';
import { ReactNode } from 'react';
import { Montserrat, Roboto } from 'next/font/google';
import '@core/styles/globals.scss';
import '@core/styles/reset.scss';
import {
  CookieNotice,
  Footer,
  Header,
  MobileCallback,
  ScrollToTop,
} from '@/widgets';
import { ModalProvider } from '@core/providers/modal-provider';
import { Toaster } from 'react-hot-toast';

const roboto = Roboto({
  subsets: ['cyrillic'],
  weight: ['300', '400', '500', '600', '700'],
  variable: '--font-roboto',
});

const montseratt = Montserrat({
  subsets: ['cyrillic'],
  weight: ['300', '400', '500', '600', '700'],
  variable: '--font-montseratt',
});

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: '/apple-touch-icon.png',
  },
  manifest: '/site.webmanifest',
};

export default function RootLayout({
  children,
}: Readonly<{ children: ReactNode }>) {
  return (
    <html lang='en'>
      <body className={`${roboto.variable} ${montseratt.variable}`}>
        <ModalProvider>
          <Header />
          <main>{children}</main>
          <Footer />
          <MobileCallback />
        </ModalProvider>
        <ScrollToTop />
        <Toaster />
        <CookieNotice />
      </body>
    </html>
  );
}
