"use client"
import { format } from "date-fns"
import { Suspense } from "react"
import { getPageBatch } from "@/actions/batch"
import { DataTable, useDataTable } from "@/components/data-table"
import type { Batch } from "@/models/batch"

export default function BatchPage() {
  const table = useDataTable<Batch>((page, size) =>
    getPageBatch({ page, size }),
  )

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <DataTable<Batch>
        {...table}
        columns={[
          { header: "ID", accessorKey: "id" },
          { header: "批次号", accessorKey: "batch_no" },
          { header: "省份", accessorKey: "prov" },
          { header: "城市", accessorKey: "city" },
          { header: "提取IP", accessorKey: "ip" },
          { header: "运营商", accessorKey: "isp" },
          { header: "提取数量", accessorKey: "count" },
          { header: "资源数量", accessorKey: "resource_id" },
          {
            header: "提取时间",
            accessorKey: "time",
            cell: ({ row }) =>
              format(new Date(row.original.time), "yyyy-MM-dd HH:mm"),
          },
        ]}
      />
    </Suspense>
  )
}