import type { ReactNode } from 'react';
import { Kanit, Sarabun, Playfair_Display } from 'next/font/google';
import './globals.css';

const sarabun = Sarabun({
  subsets: ['latin', 'thai'],
  display: 'swap',
  weight: ['300', '400', '500', '600', '700'],
  variable: '--font-sarabun',
});

const kanit = Kanit({
  subsets: ['latin', 'thai'],
  display: 'swap',
  weight: ['300', '400', '500', '600', '700'],
  variable: '--font-kanit',
});

const playfairDisplay = Playfair_Display({
  subsets: ['latin'],
  display: 'swap',
  weight: ['400', '500', '600', '700'],
  variable: '--font-playfair',
});

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="th" className={`${sarabun.variable} ${kanit.variable} ${playfairDisplay.variable} scroll-smooth`}>
      <body className="min-h-screen bg-surface-page text-text-main antialiased">
        {children}
      </body>
    </html>
  );
}