import '@code-hike/mdx/styles.css'
import 'config/code-hike.css'
import '../styles/globals.css'
import '../pages/launch-week/launchWeek.css'

import { inter, manrope, sourceCodePro } from '~/lib/fonts'
import { genFaviconData } from 'common/MetaFavicons/app-router'
import type { Metadata, Viewport } from 'next'

import Providers from './providers'
import { APP_NAME, DEFAULT_META_DESCRIPTION } from '@/lib/constants'

const site_title = `${APP_NAME} | The Postgres Development Platform`

export const metadata: Metadata = {
  title: site_title,
  description: DEFAULT_META_DESCRIPTION,
  openGraph: {
    type: 'website',
    url: 'https://supabase.com/',
    siteName: 'Supabase',
    images: [
      {
        url: 'https://supabase.com/images/og/supabase-og.png',
        width: 800,
        height: 600,
        alt: 'Supabase Og Image',
      },
    ],
  },
  twitter: {
    creator: '@supabase',
    site: '@supabase',
    card: 'summary_large_image',
  },
  // www serves from the site root (`basePath: ''` in next.config.mjs)
  icons: genFaviconData(''),
}

export const viewport: Viewport = {
  initialScale: 1,
  width: 'device-width',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
      className={`${manrope.variable} ${inter.variable} ${sourceCodePro.variable}`}
    >
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}