import DT from 'datatables.net-dt'
import DataTable from 'datatables.net-react'

import { TitleDashboard } from '~/components/ui/title-dashboard'

import { CONTENTS } from './data'

export const ContentsPage = () => {
  DataTable.use(DT)
  const columns = [
    { title: 'No', data: 'id' },
    { title: 'Tanggal Kontent', data: 'createdAt' },
    { title: 'Nama Penulis', data: 'author' },
    { title: 'Judul', data: 'title' },
    { title: 'Kategori', data: 'category' },
    { title: 'Tags', data: 'tags' },
    { title: 'Action', data: 'id', render: () => 'Edit' },
  ]

  return (
    <div className="relative">
      <TitleDashboard title="Konten" />
      <DataTable
        className="cell-border"
        data={CONTENTS}
        columns={columns}
        options={{
          paging: true,
          searching: true,
          ordering: true,
          info: true,
        }}
      ></DataTable>
    </div>
  )
}