<template>
  <span class="vm-thumb" :style="boxStyle">
    <img v-if="src" :src="src" alt="" />
    <i v-else-if="icon" :class="icon" aria-hidden="true" />
    <slot v-else />
  </span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

defineOptions({ name: 'vm-thumb' })

const props = withDefaults(
  defineProps<{
    src?: string
    icon?: string
    size?: number
  }>(),
  {
    size: 32,
  },
)

const boxStyle = computed(() => ({
  width: `${props.size}px`,
  height: `${props.size}px`,
}))
</script>

<style lang="scss" scoped>
.vm-thumb {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 12%, var(--card));
  color: var(--brand);
  font-size: 16px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
