import type { Metadata } from 'next'
import type { ReactNode } from 'react'
import './globals.css'
import '@antfu/design/styles.css'

export const metadata: Metadata = {
  title: 'Next Devframe Hub',
  description: 'A Next.js host for the @devframes/hub protocol.',
}

// Follow the OS theme before paint (@antfu/design dark: is class-based).
const themeScript = `(function(){try{if(window.matchMedia('(prefers-color-scheme: dark)').matches)document.documentElement.classList.add('dark')}catch(e){}})();`

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className="h-full" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
      </head>
      <body className="h-full m0 of-hidden bg-base color-base">{children}</body>
    </html>
  )
}
