<template>
  <div class="cocarde" :class="`cocarde--${size} cocarde--${border}`">
    <p>
      {{ initials }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { CocardeBorder } from '@/models/cocarde.model';

withDefaults(
  defineProps<{
    initials: string;
    size?: 'x-large' | 'large' | 'medium' | 'small';
    border?: CocardeBorder;
  }>(),
  { size: 'medium', border: CocardeBorder.Round },
);
</script>

<style scoped lang="scss">
.cocarde {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bms-border-color);
  color: var(--bms-main-140);
  background-color: var(--bms-main-10);
  border-radius: var(--cocarde-border-radius);
  font-weight: bold;
  text-transform: uppercase;
  flex-shrink: 0;
  width: var(--cocarde-size);
  height: var(--cocarde-size);

  p {
    margin: 0;
    font-size: calc(var(--cocarde-size) / 2);
  }

  &--round {
    --cocarde-border-radius: 50%;
  }

  &--square {
    --cocarde-border-radius: var(--bms-border-radius-large);
  }

  &--small {
    --cocarde-size: 1em;
  }

  &--medium {
    --cocarde-size: 2em;
  }

  &--large {
    --cocarde-size: 3em;
  }

  &--x-large {
    --cocarde-size: 4em;
  }
}
</style>
