import type { Metadata, Viewport } from 'next';
import { Inter, Roboto } from 'next/font/google';
import '@/app/globals.css';

import { Toaster } from 'react-hot-toast';
import { Toaster as SonnerToaster } from '@/figma-make/components/base/sonner';
import MainDrawer from '@/components/MainDrawer';
import RequireAuth from '@/components/helper/RequireAuth';

const inter = Inter({
  variable: '--font-inter',
  subsets: ['latin'],
});

const roboto = Roboto({
  variable: '--font-roboto',
  subsets: ['latin'],
  weight: ['200', '300', '400', '500', '600', '700', '900'],
});

export const viewport: Viewport = {
  themeColor: '#1f74bf',
  colorScheme: 'light',
  initialScale: 1,
};

export const metadata: Metadata = {
  title: 'LTI',
  description: 'PT. Lumbung Telur Indonesia',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang='en' data-theme='lti'>
      <body
        className={`${inter.variable} ${roboto.variable} antialiased font-inter`}
      >
        <RequireAuth>
          <MainDrawer>{children}</MainDrawer>
        </RequireAuth>

        <Toaster />
        <SonnerToaster position='top-right' />
      </body>
    </html>
  );
}
