<template>
  <div :class="cn.b()">
    <div :class="cn.e('header')">
      <p :class="cn.e('title')">
        Инструкция для оплаты
      </p>

      <UiIconExclamationFilled :class="cn.e('icon')" />
    </div>

    <p :class="cn.e('text')">
      Для оплаты скопируйте адрес в Ваш кошелек <br>
      или отсканируйте QR-код в приложении.
      <br><br>
      Далее введите в кошельке необходимую сумму <br>
      и подтвердите в этой форме зачисление.
    </p>
  </div>
</template>

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

<style lang="scss">
.invoice-form-instructions {
  $self: &;

  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: $clr-grey-100;
  border-radius: 12px;
  width: 100%;
  text-align: left;
  padding: 8px 16px;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  &__title {
    @include txt-i-b;

    color: $clr-black;
  }

  &__icon {
    color: $clr-grey-500;
  }

  &__text {
    @include txt-r-m;

    color: $clr-grey-600;
  }
}
</style>
