<template>
  <div class="trust-badge" :class="{ 'trust-badge--dark': dark }">
    <div class="trust-badge-value">
      <span class="trust-number">{{ value }}</span>
      <span v-if="unit" class="trust-unit">{{ unit }}</span>
    </div>
    <div class="trust-badge-label">{{ label }}</div>
    <div v-if="attribution" class="trust-badge-note">{{ attribution }}</div>
  </div>
</template>

<script setup>
defineProps({
  value: { type: String, required: true },
  unit: { type: String, default: '' },
  label: { type: String, required: true },
  attribution: { type: String, default: '' },
  dark: { type: Boolean, default: false },
})
</script>

<style lang="less" scoped>
.trust-badge {
  text-align: center;
  padding: @space-lg @space-md;
}

.trust-badge-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: @space-xs;
}

.trust-number {
  font-size: @font-size-3xl;
  font-weight: @font-weight-bold;
  color: @color-primary;
  letter-spacing: -1px;

  .respond-md({
    font-size: @font-size-display;
  });

  .trust-badge--dark & {
    color: #fff;
  }
}

.trust-unit {
  font-size: @font-size-base;
  color: @color-primary-light;

  .respond-md({
    font-size: @font-size-md;
  });

  .trust-badge--dark & {
    color: @color-primary-lighter;
  }
}

.trust-badge-label {
  margin-top: @space-sm;
  font-size: @font-size-sm;
  color: @color-text-secondary;
  font-weight: @font-weight-medium;

  .trust-badge--dark & {
    color: rgba(255, 255, 255, 0.6);
  }
}

.trust-badge-note {
  margin-top: @space-xs;
  font-size: @font-size-xs;
  color: @color-text-muted;

  .trust-badge--dark & {
    color: rgba(255, 255, 255, 0.35);
  }
}
</style>
