---
import { formatCurrency, formatDate } from '../utils';
import type { Transaction } from '../types';

interface Props {
    transactions: Transaction[];
}

const { transactions } = Astro.props;

// Sort transactions by date descending for display
const sortedTransactions = [...transactions].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
---
<section class="transaction-list">
    <table id="transaction-table">
         <thead>
            <tr>
                <th>Date</th>
                <th>Description</th>
                <th class="amount-col">Amount</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody id="transaction-table-body">
            {sortedTransactions.map(txn => (
                <tr data-txn-id={txn.id}>
                    <td>{formatDate(txn.date)}</td>
                    <td>{txn.description}</td>
                    <td class={`amount-col ${txn.amount >= 0 ? 'amount-positive' : 'amount-negative'}`}>
                        {formatCurrency(txn.amount)}
                    </td>
                    <td>
                        <button class="action-btn edit-btn" title="Edit transaction (not implemented)">Edit</button>
                        <button class="action-btn delete-btn" title="Delete transaction (not implemented)">Delete</button>
                    </td>
                </tr>
            ))}
            {sortedTransactions.length === 0 && (
                <tr>
                    <td colspan="4" style="text-align: center; font-style: italic; color: #777;">No transactions found for this account.</td>
                </tr>
            )}
        </tbody>
    </table>
</section>