import PaymentStatus from "./PaymentStatus.wrn"
component PaymentDetailsPage {
  props {
    payment: object
    title?: string = "Payment details"
    amountLabel?: string = "Amount"
    providerLabel?: string = "Provider"
    referenceLabel?: string = "Reference"
    createdLabel?: string = "Created"
  }
  view {
    <section class="wrn-payment-page">
      <header class="wrn-payment-page__header"><div><span class="wrn-payment-page__eyebrow">{title}</span><h1>{title}</h1></div><PaymentStatus status={payment.status} /></header>
      <dl class="wrn-payment-details">
        <div><dt>{amountLabel}</dt><dd>{payment.currency} {payment.amount}</dd></div>
        <div><dt>{providerLabel}</dt><dd>{payment.gateway}</dd></div>
        <div><dt>{referenceLabel}</dt><dd>{payment.id}</dd></div>
        <div><dt>{createdLabel}</dt><dd>{payment.createdAt}</dd></div>
      </dl>
    </section>
  }
}