import type { Metadata, Viewport } from 'next'
import { Inter } from 'next/font/google'
import { getLocale } from 'next-intl/server'
import './globals.css'
import { AuthProvider } from '../contexts/AuthContext'

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

const siteDescription =
  'Página web oficial del servidor de UrbanGamers Roleplay SAMP'

export const metadata: Metadata = {
  metadataBase: new URL(
    process.env.NEXT_PUBLIC_BASE_URL || 'https://urbangamers.es'
  ),
  title: 'UrbanGamers Roleplay',
  description: siteDescription,
  keywords: [
    'UrbanGamers',
    'Roleplay',
    'SA-MP',
    'SAMP',
    'Servidor de rol',
    'UrbanGamers Roleplay',
    'GTA San Andreas',
    'multiplayer',
  ],
  authors: [{ name: 'UrbanGamers Team', url: 'https://urbangamers.es' }],
  openGraph: {
    title: 'UrbanGamers Roleplay',
    description: siteDescription,
    url: 'https://urbangamers.es',
    siteName: 'UrbanGamers Roleplay',
    images: [
      {
        url: '/images/og-image.png',
        width: 1200,
        height: 630,
        alt: 'UrbanGamers Roleplay',
      },
    ],
    locale: 'es_ES',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'UrbanGamers Roleplay',
    description: siteDescription,
    images: ['/images/og-image.png'],
    creator: '@UrbanGamersRP',
  },
  icons: {
    icon: '/images/logo.webp',
    shortcut: '/favicon.ico',
    apple: '/images/apple-touch-icon.png',
  },
  manifest: '/site.webmanifest',
}

export const viewport: Viewport = {
  themeColor: '#1E1E1E',
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const locale = await getLocale()

  return (
    <html lang={locale} className="dark">
      <body className={`${inter.className} bg-gaming-dark text-white min-h-screen`}>
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
  )
}
