'use client'

import { forwardRef, type ComponentProps } from 'react'
import dynamic from 'next/dynamic'

import { TableSkeleton } from '@/components/feedback/LoadingState'
import type { PaginatedListHandle } from '@/components/paginated-list/PaginatedListImpl'

export type { PaginatedListHandle }

const PaginatedListImpl = dynamic(() => import('@/components/paginated-list/PaginatedListImpl'), {
  ssr: false,
  loading: () => (
    <div className="admin-surface overflow-hidden">
      <TableSkeleton
        showHeader
        columnCount={4}
      />
    </div>
  ),
})

const PaginatedList = forwardRef<PaginatedListHandle, ComponentProps<typeof PaginatedListImpl>>(function PaginatedList(props, ref) {
  return (
    <PaginatedListImpl
      ref={ref}
      {...props}
    />
  )
})

export default PaginatedList