import '@mantine/notifications/styles.css';
import '@mantine/code-highlight/styles.css';
import '@mantine/core/styles.css';
import '@mantine/spotlight/styles.css';

import React from 'react';
import { MantineProvider, ColorSchemeScript } from '@mantine/core';
import { Metadata, Viewport } from 'next';
import { ModalsProvider } from '@mantine/modals';
import { theme } from '../theme';
import { siteConfig } from '../config/site';
import { ReactQueryClientProvider } from '../components/ReactQueryClientProvider';
import { BodyContent } from './BodyContent';

export const viewport: Viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#FFF' },
    { media: '(prefers-color-scheme: dark)', color: '#000' },
  ],
};

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: `%s - ${siteConfig.name}`,
  },
  metadataBase: new URL(siteConfig.url),
  description: siteConfig.description,
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: siteConfig.url,
    title: siteConfig.name,
    description: siteConfig.description,
    siteName: siteConfig.name,
    images: [
      {
        url: siteConfig.ogImage,
        width: 1200,
        height: 630,
        alt: siteConfig.name,
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: siteConfig.name,
    description: siteConfig.description,
    images: [siteConfig.ogImage],
    creator: siteConfig.handle,
  },
  icons: {
    other: [
      { url: '/favicon/logo.png', rel: 'icon' },
      { url: '/favicon/logo.svg', rel: 'icon' },
    ],
    apple: { url: '/icon.png' },
    shortcut: { url: '/icon.svg' },
  },
};

export default function Application({ children }: any) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript forceColorScheme="dark" defaultColorScheme="dark" />
      </head>
      <body>
        <ReactQueryClientProvider>
          <MantineProvider forceColorScheme="dark" theme={theme}>
            <ModalsProvider>
              <BodyContent>{children}</BodyContent>
            </ModalsProvider>
          </MantineProvider>
        </ReactQueryClientProvider>
      </body>
    </html>
  );
}
