<template>
  <div class="money-amount">
    <p class="money-amount__value">
      {{ value }}
      <span
        v-if="showCurrency"
        class="money-amount__currency"
      >{{
        currencySymbol
      }}</span>
    </p>
    <p
      v-if="showBaseAmount"
      class="money-amount__base"
    >
      <span v-if="false">~</span> 0,00
      <span class="money-amount__currency">$</span>
    </p>
  </div>
</template>

<script setup lang="ts">
import type Decimal from 'decimal.js'

export interface Props {
  value: Decimal.Value
  currency: string
  showCurrency?: boolean
  rate?: Decimal.Value
}

const props = withDefaults(defineProps<Props>(), {
  showCurrency: true,
})

const value = computed(() => $money.format(props.value, props.currency))
const currencySymbol = computed(() => $money.getSymbol(props.currency))
const showBaseAmount = computed(() => !!props.rate)
</script>

<style lang="scss">
.money-amount {
  display: inline-block;
  vertical-align: middle;

  &__value {
    @include txt-r-sb('money-amount-value');

    display: inline-block;
    white-space: nowrap;
  }

  &__currency {
    color: $clr-grey-400;
  }

  &__base {
    @include txt-s-m;

    display: inline-block;
    color: $clr-grey-500;
    margin-top: 4px;
  }
}
</style>
