import { Suspense } from "react"

import Sidebar from "@/components/MyPages/Sidebar"
import SidebarNavigationSkeleton from "@/components/MyPages/Sidebar/SidebarNavigationSkeleton"
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={<SidebarNavigationSkeleton />}>
            <Sidebar />
          </Suspense>
          {children}
        </section>
      </section>

      <Surprises />
    </div>
  )
}