<template>
  <div class="block">
    <span class="text-small">Spent</span>
    <span class="text-small">Remaining limit </span>
  </div>

  <UiProgressBar class="progress" :progress="(amount / maxAmount) * 100" />

  <div class="block">
    <span class="text-amount">{{ amount }} <span class="text-currency">{{ currency }}</span></span>
    <span class="text-amount">{{ maxAmount - amount }} <span class="text-currency">{{ currency }}</span> </span>
  </div>
</template>

<script setup>
defineProps({
  currency: { type: String, required: true },
  amount: { type: Number, required: true },
  maxAmount: { type: Number, required: true },
})
</script>

<style lang="scss" scoped>
.block{
  display: flex;
  justify-content: space-between;
}

.progress{
  margin-block: 8px;
}

.text-small {
  @include txt-r;
  color: $clr-grey-500;
}

.text-currency {
  @include txt-i-sb;
  color: $clr-grey-400;
}
.text-amount{
  @include txt-i-sb;
}
</style>
