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

import { ActionButtons } from './ActionButtons'
import { PaymentConcept } from '@/src/interfaces/users/paymentConcepts'

interface Props {
  onOpenEditModal: (paymentConceptId: string) => void
  onOpenDeleteModal: (paymentConceptId: string) => void
}

export const useColumns = ({ onOpenEditModal, onOpenDeleteModal }: Props) =>
  React.useMemo<ColumnDef<PaymentConcept>[]>(
    () => [
      {
        header: 'Nombre',
        accessorKey: 'name',
        cell: ({ row }) => (
          <span className="text-nowrap">{row.original.name}</span>
        ),
      },
      { header: 'Ciclo Académico', accessorKey: 'studyYear.year' },
      {
        header: 'Monto',
        accessorKey: 'amount',
        cell: ({ row }) => (
          <span className="text-nowrap">
            S/ {row.original.amount.toFixed(2)}
          </span>
        ),
      },
      {
        header: 'Creado por',
        accessorKey: 'creatorName',
      },
      {
        header: 'Acciones',
        enableSorting: false,
        cell: ({ row }) => (
          <ActionButtons
            paymentConceptId={row.original.id}
            onEdit={onOpenEditModal}
            onDelete={onOpenDeleteModal}
          />
        ),
      },
    ],
    [],
  )