/* Copyright (C) 2024 Manuel Bustillo*/

'use client';

import { lusitana } from '@/app/ui/fonts';
import ExpensesTable from '@/app/ui/expenses/table';
import { useState, useEffect } from 'react';
import { Expense } from '@/app/lib/definitions';
import { loadExpenses } from '@/app/api/expenses';
 
export default  function Page () {
  const [expenses, setExpenses] = useState<Array<Expense>>([]);

  function refreshExpenses() {
    loadExpenses((expenses) => {
      setExpenses(expenses);
    });
  }

  useEffect(() => refreshExpenses, []);

  return (
    <div className="w-full">
      <div className="w-full items-center justify-between">
        <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
        <h2 className={`${lusitana.className} text-xl`}>Summary</h2>
        <ExpensesTable expenses={expenses}/>
      </div>
    </div>
  );
}