import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
import DataTable from 'datatables.net-react'
import React from 'react'

export type UiTableProperties = {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  data: any[]
  columns: ConfigColumns[]
  slots?: any // eslint-disable-line @typescript-eslint/no-explicit-any
  options?: Config
  title: string
}

export const UiTable: React.FC<UiTableProperties> = ({
  data,
  columns,
  slots,
  options,
  title,
}) => {
  DataTable.use(DT)
  return (
    <div className="rounded-lg bg-white p-5 shadow-md">
      <h3 className="py-1 font-semibold text-[#4C5CA0]">{title}</h3>
      <div className="rounded-lg">
        <DataTable
          className="cell-border"
          data={data}
          columns={columns}
          slots={slots}
          options={{
            paging: true,
            searching: true,
            ordering: true,
            info: true,
            ...options,
          }}
        />
      </div>
    </div>
  )
}