<script lang="ts">
  import PaymentHistoryItem from "$lib/components/PaymentHistoryItem.svelte";
  import LoadingIndicator from "$lib/components/LoadingIndicator.svelte";
  import { walletState } from "$lib/wallet.svelte";

  let payments = $derived(
    $walletState.open
      ? $walletState.wallet?.listPayments(100, 0)
      : Promise.resolve([])
  );
</script>

<div class="payment-history">
  {#await payments}
    <LoadingIndicator />
  {:then payments}
    {#if payments.length === 0}
      <p class="empty">No payments yet.</p>
    {:else}
      {#each payments as payment (payment.txId)}
        <PaymentHistoryItem {payment} />
      {/each}
    {/if}
  {/await}
</div>

<style>
  .payment-history {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .empty {
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0.5rem 0;
  }
</style>
