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

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(),
);

// TODO: UI/UX Improvements
// - Add sorting functionality for all columns
// - Implement pagination for large transaction lists
// - Add transaction filtering capabilities
// - Implement row hover actions
// - Add transaction details expansion/collapse
// - Consider adding bulk actions (delete, categorize)
---
<section class="transaction-list" id="transaction-section">
    <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">Edit</button>
                        <button class="action-btn delete-btn" title="Delete transaction">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>