<template>
  <div :class="cn.b()">
    <p :class="cn.e('label')">
      To pay:
    </p>

    <div :class="cn.e('left')">
      <span :class="cn.e('amount')">{{ amount }}</span>
      <UiCopyButton
        :class="cn.e('copy')"
        :title="null"
        :pressed-title="null"
        :value="amount"
      />
    </div>

    <div :class="cn.e('right')">
      <UiCoin
        :class="cn.e('coin')"
        :code="invoice.currencyCode"
      />
      <span :class="cn.e('code')">{{ invoice.currencyCode }}</span>
      <span :class="cn.e('network')">TRC20</span>
    </div>
  </div>
</template>

<script setup>
const { invoice } = inject('public-invoice')

const amount = computed(() => $money.format(invoice.value.amount, invoice.value.code))

const cn = useClassname('invoice-form-amount')
</script>

<style lang="scss">
.invoice-form-amount {
  display: grid;
  grid-template-areas: 'label label' 'left right';
  text-align: left;
  padding-inline: 16px;

  &__label {
    @include txt-r-m;

    grid-area: label;
    margin-bottom: 3px;
    color: $clr-grey-500;
  }

  &__left {
    display: flex;
    align-items: center;
    grid-area: left;
  }

  &__amount {
    @include h2;
  }

  &__copy {
    margin-left: 8px;
  }

  &__right {
    display: flex;
    align-items: center;
    grid-area: right;
    justify-self: flex-end;
  }

  &__code {
    @include font(16px, 600, 20px);

    margin-left: 8px;
  }

  &__network {
    @include txt-i-m;

    padding: 3px 5px;
    border-radius: 6px;
    background-color: $clr-cyan-500;
    color: $clr-white;
    margin-left: 8px;
  }
}
</style>
