<template>
  <div class="info-columns">
    <PageInfoBlock
      title="More limits"
      text="Get increased limits and advanced features by providing a little more profile information"
      action="Increase the limit"
      link="/verification/status"
      badge="BASIC"
      style="
        background-image: url('/block2.jpg');
        background-size: cover;
        background-position: bottom right;
      "
    >
      <template #info>
        <div
          v-if="!maxState"
          class="limits"
        >
          <p class="limits__date">
            Updated on <strong>{{ dayjs().format('DD.MM.YYYY') }}</strong>
          </p>

          <div>
            <p class="limits__title">
              Remaining limit
            </p>

            <div class="mb-4 d-flex justify-content-between">
              <span class="limits__current">{{ dayLimit }} <span class="limits__current-text">/ per day</span></span>

              <span class="limits__total">{{ curDayLimit }} USDT</span>
            </div>
            <UiProgressBar :progress="(curDayLimit / dayLimit) * 100" />

            <div class="mb-4 mt-24 d-flex justify-content-between">
              <span class="limits__current">{{ monthLimit }} <span class="limits__current-text">/ per month</span></span>

              <span class="limits__total">{{ curMonthLimit }} USDT</span>
            </div>
            <UiProgressBar :progress="(curMonthLimit / monthLimit) * 100" />
          </div>
        </div>
      </template>
    </PageInfoBlock>

    <PageInfoBlock
      title="2FA authentication"
      text="Complete the verification process to remove withdrawal limits."
      action="Add 2FA"
      link="/2fa"
    />
  </div>
</template>

<script setup>
import dayjs from 'dayjs'

const maxState = ref(false)

const curDayLimit = ref(100)
const curMonthLimit = ref(5200)

const dayLimit = ref(1000)
const monthLimit = ref(10000)
</script>

<style lang="scss">
.info-columns {
  > *:not(:last-child) {
    margin-bottom: 8px;
  }
}

.limits {
  margin-bottom: 24px;

  &__date {
    @include txt-s;
    color: $clr-grey-500;
    margin-bottom: 16px;
  }

  &__title {
    @include txt-s-m;
    color: $clr-grey-400;
    text-align: right;
  }

  &__total {
    @include txt-s-m;
    color: $clr-grey-500;
  }

  &__current {
    @include txt-m-sb;
  }

  &__current-text{
    @include txt-r-sb;
    color: $clr-grey-400;
  }
}
</style>
