/* Copyright (C) 2024 Manuel Bustillo*/

'use client'

import React, { useState } from "react"
import { Expense } from '@/app/lib/definitions';
import TableOfContents from "../components/table-of-contents";

export default function ExpensesTable() {
    const [expenses, setExpenses] = useState<Array<Expense>>([]);

    function loadExpenses() {
        fetch("/api/expenses")
            .then((response) => response.json())
            .then((data) => {
                setExpenses(data.map((record: any) => {
                    return ({
                        id: record.id,
                        name: record.name,
                        amount: record.amount,
                        pricingType: record.pricing_type
                    });
                }));
            }, (error) => {
                return [];
            });
    }

    expenses.length === 0 && loadExpenses();

    return (
        <TableOfContents
            headers={['Name', 'Amount', 'Pricing Type']}
            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>
                </tr>
            )}
        />
    );
}