/* Copyright (C) 2024 Manuel Bustillo*/

'use client'

import { AbstractApi } from '@/app/api/abstract-api';
import { Expense, ExpenseSerializer } from '@/app/lib/expense';
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import TableOfContents from "../components/table-of-contents";


export default function ExpensesTable({ expenses, onUpdate, onEdit }: {
  expenses: Expense[],
  onUpdate: () => void,
  onEdit: (expense: Expense) => void,
}) {

  const api = new AbstractApi<Expense>();
  const serializer = new ExpenseSerializer();

  return (
    <TableOfContents
      headers={['Name', 'Amount (€)', 'Pricing Type', 'Actions']}
      caption='Expenses'
      elements={expenses}
      rowRender={(expense) => (
        <tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
          <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            {expense.name}
          </th>
          <td className="px-6 py-4">
            {expense.amount}
          </td>
          <td>
            {expense.pricingType}
          </td>
          <td>
            <div className="flex flex-row items-center">
              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, expense, onUpdate) }} />
              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(expense)} />
            </div>
          </td>
        </tr>
      )}
    />
  );
}