"use client"

import { usePathname } from "next/navigation"
import { useEffect, useState } from "react"
import { BottomNav } from "./bottom-nav"
import { ConfigLoader } from "../config/config-loader"

export function LayoutWrapper({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const [mounted, setMounted] = useState(false)
  const isAdmin = pathname?.startsWith("/admin")
  const isView = pathname?.startsWith("/view") || pathname === "/"

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    return (
      <div className="mx-auto max-w-[430px] min-h-screen bg-black shadow-2xl relative font-sans antialiased">
        <ConfigLoader />
        {children}
      </div>
    )
  }

  if (isAdmin) {
    return (
      <div className="min-h-screen bg-gray-100 text-gray-900 font-sans">
        <ConfigLoader />
        {children}
      </div>
    )
  }

  return (
    <div className="mx-auto max-w-[430px] min-h-screen bg-black shadow-2xl relative font-sans antialiased">
      <ConfigLoader />
      {children}
      <BottomNav />
    </div>
  )
}