import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import ThemeRegistry from '@/components/ThemeRegistry/ThemeRegistry'

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

export const metadata: Metadata = {
  title: 'らいきゃくん通知',
  description: 'らいきゃくんの通知をスマホで受け取ることが出来るようになりました',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <head>
        <meta name="application-name" content="らいきゃくん通知" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta
          name="apple-mobile-web-app-status-bar-style"
          content="default"
        />
        <meta name="apple-mobile-web-app-title" content="らいきゃくん通知" />
        <meta name="description" content="らいきゃくんの通知をスマホで受け取れます" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)" />
        <meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)" />
        <link
          rel="apple-touch-icon"
          sizes="192x192"
          href="/images/maskable_icon_x192.png"
        />
      </head>
      <body className={inter.className}>
        <ThemeRegistry>
        {children}
        </ThemeRegistry>
      </body>
    </html>
  )
}
