<template>
  <div class="qr-block" :class="[`qr-block--${size}`]">
    <img :src="image" :alt="`${label}二维码`" class="qr-image" loading="lazy" />
    <span class="qr-label">{{ label }}</span>
  </div>
</template>

<script setup>
defineProps({
  image: { type: String, required: true },
  label: { type: String, required: true },
  size: { type: String, default: 'normal' },
})
</script>

<style lang="less" scoped>
.qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: @space-xs;
}

.qr-image {
  border-radius: @border-radius-sm;
  background: @color-bg-gray;
  object-fit: contain;

  .qr-block--small & {
    width: 80px;
    height: 80px;
  }

  .qr-block--normal & {
    width: 140px;
    height: 140px;
  }

  .qr-block--large & {
    width: 180px;
    height: 180px;
  }
}

.qr-label {
  font-size: @font-size-xs;
  color: @color-text-muted;

  .qr-block--normal &,
  .qr-block--large & {
    font-size: @font-size-sm;
  }
}
</style>
