"use client"

import dynamic from "next/dynamic"
import type { Manual, ManualGroup } from "@/lib/manuals-types"

const ManualsPageClient = dynamic(
  () =>
    import("@/components/manuals-page-client").then(
      (mod) => mod.ManualsPageClient
    ),
  {
    ssr: false,
    loading: () => (
      <div className="rounded-[2rem] border border-border/70 bg-[linear-gradient(180deg,rgba(255,255,255,0.96),rgba(247,244,236,0.92))] p-6 text-sm text-muted-foreground shadow-[0_24px_60px_rgba(0,0,0,0.08)]">
        Loading manual browser...
      </div>
    ),
  }
)

interface ManualsPageShellProps {
  manuals: Manual[]
  groupedManuals: ManualGroup[]
  manufacturers: string[]
  categories: string[]
}

export function ManualsPageShell(props: ManualsPageShellProps) {
  return <ManualsPageClient {...props} />
}