"use client"

import { Suspense } from "react"

import { LoginLogTable } from "./login-log-table"
import { LoginLogFilters } from "./login-log-filters"
import { AuditLogTableSkeleton } from "./audit-log-table-skeleton"
import { useLogPagination } from "../hooks/use-log-pagination"
import type { LoginLog } from "../types"

interface LoginLogViewProps {
  items: LoginLog[]
  page: number
  pageSize: number
  total: number
  totalPages: number
}

function LoginLogViewInner({
  items,
  page,
  pageSize,
  total,
  totalPages,
}: LoginLogViewProps) {
  const handlePageChange = useLogPagination()

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

export function LoginLogView(props: LoginLogViewProps) {
  return (
    <Suspense fallback={<AuditLogTableSkeleton />}>
      <LoginLogViewInner {...props} />
    </Suspense>
  )
}
