import type { JSX, ReactNode } from 'react'
import { DeckPageSkeleton } from './DeckPageSkeleton'

export interface CollectorQueryLike<T> {
  data?: T
  error: unknown
  isPending: boolean
  isError: boolean
}

/** Renders a fetched collector query: last-good data wins, skeleton while pending, alert on first-load error. */
export function CollectorQueryBoundary<T>(props: {
  query: CollectorQueryLike<T>
  skeleton?: ReactNode
  children: (data: T) => ReactNode
}): JSX.Element {
  const { query } = props
  if (query.data !== undefined) {
    return <>{props.children(query.data)}</>
  }
  if (query.isPending) {
    return <>{props.skeleton ?? <DeckPageSkeleton />}</>
  }
  if (query.isError) {
    return (
      <p className="text-sm text-danger" role="alert">
        Data couldn't load: {String(query.error)}
      </p>
    )
  }
  return <>{props.skeleton ?? <DeckPageSkeleton />}</>
}