<template>
  <PageBlock
    class="settings-limits"
    title="Current tariff"
  >
    <template #badge>
      <UiBadge type="marketing">
        BASIC
      </UiBadge>
    </template>

    <template #actions>
      <UiButton>Increase the limit</UiButton>
    </template>

    <SettingsTariffCard title="Withdrawal of funds">
      <template #icon>
        <UiIconArrowSend class="text-clr-cyan-600" />
      </template>

      <template #subtitle>
        <div class="settings-limits__subtitle">
          <span>Minimum withdrawal amount <strong>5 usdt</strong></span>

          <div class="settings-limits-separator" />

          <span>Withdrawal fee <strong>2.5 usdt + 1%</strong></span>
        </div>
      </template>

      <template #content>
        <div class="settings-limits-content">
          <div class="settings-limits-content__header">
            <strong>The limit</strong> <span class="text-clr-grey-500"> for today</span>
            <UiBadge type="marketing" class="ml-8">
              It will be updated at 16:00
            </UiBadge>
          </div>

          <SettingsLimitProgress currency="USDT" :max-amount="880" :amount="120" />
        </div>

        <div class="settings-limits-separator" />

        <div class="settings-limits-content">
          <div class="settings-limits-content__header">
            <span class="text-clr-grey-500"> Monthly</span> <strong>limit</strong>
            <UiBadge type="marketing" class="ml-8">
              Updated on 03.01.2023
            </UiBadge>
          </div>

          <SettingsLimitProgress currency="USDT" :max-amount="10000" :amount="120" />
        </div>
      </template>
    </SettingsTariffCard>

    <SettingsTariffCard title="Creating invoices">
      <template #icon>
        <UiIconArrowReceive class="text-clr-green-500" />
      </template>

      <template #subtitle>
        <div class="settings-limits__subtitle">
          <span>The minimum amount in the invoice is <strong>5 usdt</strong></span>

          <div class="settings-limits-separator" />

          <span>The commission for creating an invoice is <strong> 0.5 usdt</strong></span>
        </div>
      </template>

      <template #content>
        <div class="settings-limits-content">
          <div class="settings-limits-content__header">
            <strong>The limit</strong> <span class="text-clr-grey-500"> for today</span>
            <UiBadge type="marketing" class="ml-8">
              It will be updated at 16:00
            </UiBadge>
          </div>

          <SettingsLimitProgress currency="invoices" :max-amount="200" :amount="200" />
        </div>

        <div class="settings-limits-separator" />

        <div class="settings-limits-content">
          <div class="settings-limits-content__header">
            <span class="text-clr-grey-500"> Monthly</span> <strong>limit</strong>
            <UiBadge type="marketing" class="ml-8">
              Updated on 03.01.2023
            </UiBadge>
          </div>

          <SettingsLimitProgress currency="invoices" :max-amount="1000" :amount="751" />
        </div>
      </template>
    </SettingsTariffCard>
  </PageBlock>
</template>

<script setup>

</script>

<style lang="scss">
.settings-limits{
  --page-block-gap: 24px;
  --page-block-padding: 24px;

  &__subtitle{
    display: flex;
    @include txt-r;
    color: $clr-grey-600;
  }

}

.settings-limits-separator{
  width: 1px;
  margin-inline: 16px;
  background-color: $clr-grey-300;
}
.settings-limits-content {
  width: 544px;
  &__header{
    margin-bottom: 16px;
  }
}
</style>
