import { Suspense } from "react"

import LoadingSpinner from "@/components/LoadingSpinner"
import Sidebar from "@/components/MyPages/Sidebar"

// import Surprises from "@/components/MyPages/Surprises"
import styles from "./layout.module.css"

export default async function MyPagesLayout({
  breadcrumbs,
  children,
}: React.PropsWithChildren<{
  breadcrumbs: React.ReactNode
}>) {
  return (
    <div className={styles.container}>
      <section className={styles.layout}>
        {breadcrumbs}
        <section className={styles.content}>
          <Suspense fallback={<LoadingSpinner />}>
            <Sidebar />
          </Suspense>
          {children}
        </section>
      </section>

      {/* TODO: Waiting on new API stuff
        <Surprises />
      */}
    </div>
  )
}
