<template>
  <div
    class="currency-name"
    :class="`currency-name--${size}`"
  >
    <UiCoin
      class="currency-name__coin"
      :code="code"
    />

    <span
      v-if="size !== 'small'"
      class="currency-name__name"
    >
      {{ name || code }}
    </span>
    <span class="currency-name__code">{{ code }}</span>
  </div>
</template>

<script setup lang="ts">
export interface Props {
  code: string
  name?: string
  size?: 'small' | 'medium'
}

defineOptions({
  name: 'CurrencyName',
})

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
})
</script>

<style lang="scss">
.currency-name {
  &--medium {
    display: grid;
    grid-template-columns: 32px auto;
    gap: var(--currency-name-gap, 4px 8px);
    align-items: center;
  }

  &--small {
    --coin-size: 20px;

    display: inline-flex;
    vertical-align: middle;
    justify-content: flex-end;
    align-items: center;
    gap: var(--currency-name-gap, 4px);
  }

  &__coin {
    grid-column: 1;
    grid-row: span 2;
  }

  &__name {
    @include txt-r-sb('currency-name');

    color: $clr-black;
  }

  &__code {
    @include txt-s-m('currency-name-code');

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