import type { Metadata } from 'next'
import localFont from 'next/font/local'
import './globals.css'
import { Toaster } from '@/components/ui/toaster'
import { brand } from '@/lib/brand'
import { LayoutWrapper } from '@/components/layout/LayoutWrapper'
import { Providers } from '@/components/common/Providers'

const inter = localFont({
  src: [
    { path: '../assets/fonts/inter/inter-400.ttf', weight: '400', style: 'normal' },
    { path: '../assets/fonts/inter/inter-500.ttf', weight: '500', style: 'normal' },
    { path: '../assets/fonts/inter/inter-600.ttf', weight: '600', style: 'normal' },
    { path: '../assets/fonts/inter/inter-700.ttf', weight: '700', style: 'normal' },
  ],
  display: 'swap',
})

export const metadata: Metadata = {
  title: brand.brandName,
  description: brand.taglineEn,
  icons: {
    icon: brand.logoPath,
    apple: brand.logoPath,
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  // suppressHydrationWarning: <html> 常被浏览器扩展（沉浸式翻译 / Grammarly 等）
  // 在 hydrate 前注入 data-* 属性，仅屏蔽本标签属性的 SSR/CSR 对比，子树正常 hydrate
  return (
    <html lang="zh-CN" suppressHydrationWarning>
      <body className={`${inter.className} font-sans antialiased`}>
        <Providers>
          <LayoutWrapper>
            {children}
          </LayoutWrapper>
          <Toaster />
        </Providers>
      </body>
    </html>
  )
}
