import PaymentHistory from "./PaymentHistory.wrn"
import PaymentSummary from "./PaymentSummary.wrn"
component PaymentOverviewPage {
  props {
    payments: array = []
    captured: number = 0
    refunded: number = 0
    net: number = 0
    currency: string = "USD"
    title?: string = "Payments"
    description?: string = "Review payment activity, statuses, and totals."
    emptyLabel?: string = "No payments yet."
  }
  view {
    <section class="wrn-payment-page">
      <header class="wrn-payment-page__header"><div><span class="wrn-payment-page__eyebrow">{title}</span><h1>{title}</h1><p>{description}</p></div></header>
      <PaymentSummary captured={captured} refunded={refunded} net={net} currency={currency} />
      <div class="wrn-payment-panel"><h2>{title}</h2>{#if payments.length}<PaymentHistory payments={payments} />{:else}<div class="wrn-payment-empty">{emptyLabel}</div>{/if}</div>
    </section>
  }
}