Data Table

'use client'

import * as React from 'react'
import type { ColumnDef } from '@tanstack/react-table'

import { DataTable } from '@/components/custom/data-table'
import { StatusBadge, type PaymentStatus } from '@/components/custom/status-badge'
import { formatMoney } from '@/lib/kiota-format'

interface Payout {
  reference: string
  beneficiaryName: string
  amount: number
  status: PaymentStatus
}

const PAYOUTS: Payout[] = [
  { reference: 'PO-1041', beneficiaryName: 'Ada Lovelace', amount: 125050, status: 'success' },
  { reference: 'PO-1042', beneficiaryName: 'Grace Hopper', amount: 84000, status: 'pending' },
  { reference: 'PO-1043', beneficiaryName: 'Wanjiru Kamau', amount: 231575, status: 'failed' },
  { reference: 'PO-1044', beneficiaryName: 'Otieno Odhiambo', amount: 45900, status: 'refunded' },
  { reference: 'PO-1045', beneficiaryName: 'Amina Yusuf', amount: 660000, status: 'success' },
]

const columns: ColumnDef<Payout>[] = [
  { accessorKey: 'reference', header: 'Reference' },
  { accessorKey: 'beneficiaryName', header: 'Beneficiary' },
  {
    accessorKey: 'amount',
    header: 'Amount',
    cell: ({ row }) => <span className="tabular-nums">{formatMoney(row.original.amount)}</span>,
  },
  {
    accessorKey: 'status',
    header: 'Status',
    cell: ({ row }) => <StatusBadge status={row.original.status} />,
  },
]

export default function DataTableDemo() {
  return (
    <div className="w-full">
      <DataTable
        columns={columns}
        data={PAYOUTS}
        searchKeys={['reference', 'beneficiaryName']}
        sortField="reference"
        tableClassName="min-w-[640px]"
      />
    </div>
  )
}