import type { Metadata } from 'next'
import { Cairo, Readex_Pro } from 'next/font/google'
import './globals.css'
import { Providers } from './providers'
import { AuthProvider } from '@/contexts/AuthContext'
import { LanguageProvider } from '@/contexts/LanguageContext'
import { Toaster } from 'react-hot-toast'

const cairo = Cairo({ 
  subsets: ['latin', 'arabic'],
  variable: '--font-cairo',
  display: 'swap',
})

const readexPro = Readex_Pro({ 
  subsets: ['latin', 'arabic'],
  variable: '--font-readex',
  display: 'swap',
})

export const metadata: Metadata = {
  title: 'ATMATA - نظام إدارة علاقات العملاء',
  description: 'Enterprise CRM System for Contact Management, Sales, HR, Inventory, Projects, and Marketing',
  icons: {
    icon: '/favicon.ico',
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${readexPro.variable} ${cairo.variable} font-readex`}>
        <LanguageProvider>
          <AuthProvider>
            <Providers>{children}</Providers>
            <Toaster
            position="top-center"
            reverseOrder={false}
            toastOptions={{
              duration: 4000,
              style: {
                background: '#fff',
                color: '#363636',
                fontFamily: 'var(--font-readex)',
              },
              success: {
                duration: 3000,
                iconTheme: {
                  primary: '#10B981',
                  secondary: '#fff',
                },
              },
              error: {
                duration: 5000,
                iconTheme: {
                  primary: '#EF4444',
                  secondary: '#fff',
                },
              },
            }}
          />
          </AuthProvider>
        </LanguageProvider>
      </body>
    </html>
  )
}

