import {Skeleton} from '../ui/skeleton'

import {TrackingPixel} from './tracking-pixel'

interface Props {
  loadingComponent?: React.ReactNode
  isFetchingMore?: boolean
  fetchMore: () => void
}

export function Pagination({loadingComponent, fetchMore}: Props) {
  const loadingPlaceholder = loadingComponent ?? (
    <Skeleton className="h-10 w-full p-8" />
  )

  return (
    <TrackingPixel onImpression={fetchMore}>{loadingPlaceholder}</TrackingPixel>
  )
}
