import PaymentMethodList from "./PaymentMethodList.wrn"
component PaymentMethodsPage {
  props {
    methods: array = []
    title?: string = "Payment methods"
    description?: string = "Manage provider-vaulted payment methods."
    emptyLabel?: string = "No saved payment methods."
  }
  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>
      <div class="wrn-payment-panel">{#if methods.length}<PaymentMethodList methods={methods} />{:else}<div class="wrn-payment-empty">{emptyLabel}</div>{/if}</div>
    </section>
  }
}