import { QueryBoundary, type QueryLike } from '@platform-modules/ui-primitives/QueryBoundary'
import type { JSX, ReactNode } from 'react'
import { DeckPageSkeleton } from './DeckPageSkeleton'

export function CollectorQueryBoundary<T>(props: {
  query: QueryLike<T>
  skeleton?: ReactNode
  children: (data: T) => ReactNode
}): JSX.Element {
  return (
    <QueryBoundary query={props.query} skeleton={props.skeleton ?? <DeckPageSkeleton />}>
      {props.children}
    </QueryBoundary>
  )
}
