"use client"

import type { ReactNode } from "react"

import { Skeleton } from "@/components/ui/skeleton"
import { XmlApiTableLoadingOverlay } from "@/components/xml-apis/shared/xml-api-table-loading-overlay"
import {
  XmlApiPaginatedRange,
  XmlApiServerPagination,
} from "@/components/xml-apis/shared/xml-api-server-pagination"
import { cn } from "@/lib/utils"

type XmlApiPaginatedTableLayoutProps = {
  page: number
  pageSize: number
  pageCount: number
  totalCount: number
  isLoading?: boolean
  hasData?: boolean
  onPageChange?: (page: number) => void
  onPageSizeChange?: (pageSize: number) => void
  pageSizeOptions?: number[]
  children: ReactNode
}

export function XmlApiPaginatedTableLayout({
  page,
  pageSize,
  pageCount,
  totalCount,
  isLoading,
  hasData = false,
  onPageChange,
  onPageSizeChange,
  pageSizeOptions,
  children,
}: XmlApiPaginatedTableLayoutProps) {
  if (isLoading && !hasData) {
    return <Skeleton className="h-64 w-full rounded-lg" />
  }

  return (
    <div className="space-y-4">
      <XmlApiPaginatedRange page={page} pageSize={pageSize} totalCount={totalCount} />

      <div className="relative overflow-x-auto rounded-lg border bg-card">
        <XmlApiTableLoadingOverlay isLoading={isLoading} />
        <div className={cn(isLoading && "pointer-events-none opacity-50")}>{children}</div>
      </div>

      <XmlApiServerPagination
        page={page}
        pageSize={pageSize}
        pageCount={pageCount}
        totalCount={totalCount}
        isLoading={isLoading}
        onPageChange={onPageChange}
        onPageSizeChange={onPageSizeChange}
        pageSizeOptions={pageSizeOptions}
      />
    </div>
  )
}