'use client'

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import { Providers } from './providers'
import { PortalHeader } from '@/components/layout/PortalHeader'
import { PortalSidebar } from '@/components/layout/PortalSidebar'
import { PortalBreadcrumbs } from '@/components/layout/PortalBreadcrumbs'
import { MobileNavigation } from '@/components/layout/MobileNavigation'
import { KeyboardShortcutsProvider } from '@/components/KeyboardShortcutsProvider'
import { SessionProvider } from 'next-auth/react'

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <SessionProvider>
          <Providers>
            <KeyboardShortcutsProvider>
              <div className="flex min-h-screen flex-col">
                <PortalHeader />
                <PortalBreadcrumbs />
                <div className="flex flex-1">
                  <PortalSidebar />
                  <main className="flex-1 ml-0 md:ml-64">
                    {children}
                  </main>
                </div>
                <MobileNavigation />
              </div>
            </KeyboardShortcutsProvider>
          </Providers>
        </SessionProvider>
      </body>
    </html>
  )
}
