<script setup>
import { ref } from "vue";
import { setRandomBGCL } from "../utils/randomBGCL.js";

defineProps({
  text: {
    type: String,
    required: true
  },
  imageSrc: {
    type: String,
    required: true
  },
  size: {
    type: Number,
    required: false,
    default: 200
  }
});

const imageLoaded = ref(false);
</script>
<template>
  <div class="image-container" :style="{background: setRandomBGCL(text), height: size + 'px'}">
    <img :src="imageSrc" alt="image" class="image"
         :style="{height: size + 'px', display: imageLoaded ? 'block' : 'none'}"
         @load="imageLoaded = true"
         @error="imageLoaded = false" />
    <div v-if="!imageLoaded" class="cover-character" :style="{fontSize: size + 'px'}">
      {{ text[0] }}
    </div>
  </div>
</template>

<style scoped>
.image-container {
  width: 100%;
}
.image-container .cover-character {
  width: 100%;
  height: 100%;
  font-family: 'huangkaihua', Tahoma, Geneva, Verdana, sans-serif;
  color: gray;
  mix-blend-mode: difference;
}
.image {
  width: 100%;
  object-fit: cover;
}


</style>