import './globals.css'
import { Inter } from 'next/font/google'
import Sidebar from '@/components/Sidebar'
import Search from '@/components/Search'
import { parseServerPacks } from '@/utils/yamlParser'

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

export const metadata = {
  title: 'Minecraft Server Packs',
  description: 'A collection of Minecraft server packs',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { categories } = parseServerPacks()

  return (
    <html lang="en">
      <body className={`${inter.className} flex flex-col min-h-screen bg-gray-50`}>
        <header className="bg-white shadow-md">
          <div className="container mx-auto px-4 py-4 flex justify-between items-center">
            <h1 className="text-2xl font-bold text-gray-800">Minecraft Server Packs</h1>
            <div className="w-1/3">
              <Search />
            </div>
          </div>
        </header>
        <div className="flex flex-1">
          <Sidebar categories={categories} />
          <main className="flex-1 p-6">
            {children}
          </main>
        </div>
      </body>
    </html>
  )
}