import { Suspense } from "react"

import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"

import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"

export default function CollectionPageBreadcrumbs() {
  const variants: Pick<BreadcrumbsProps, "color" | "size"> = {
    color: "Surface/Secondary/Default",
    size: "contentWidth",
  }

  return (
    <Suspense fallback={<BreadcrumbsSkeleton {...variants} />}>
      <Breadcrumbs {...variants} />
    </Suspense>
  )
}
