"use client"

import { Suspense } from "react"

import { AuditLogTable } from "./audit-log-table"
import { AuditLogFilters } from "./audit-log-filters"
import { AuditLogTableSkeleton } from "./audit-log-table-skeleton"
import { useLogPagination } from "../hooks/use-log-pagination"
import type { AuditLog } from "../types"

interface AuditLogViewProps {
  items: AuditLog[]
  page: number
  pageSize: number
  total: number
  totalPages: number
  moduleOptions: string[]
}

function AuditLogViewInner({
  items,
  page,
  pageSize,
  total,
  totalPages,
  moduleOptions,
}: AuditLogViewProps) {
  const handlePageChange = useLogPagination()

  return (
    <div className="space-y-4">
      <AuditLogFilters moduleOptions={moduleOptions} />
      <AuditLogTable
        items={items}
        page={page}
        pageSize={pageSize}
        total={total}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />
    </div>
  )
}

export function AuditLogView(props: AuditLogViewProps) {
  return (
    <Suspense fallback={<AuditLogTableSkeleton />}>
      <AuditLogViewInner {...props} />
    </Suspense>
  )
}
