<template>
  <div
    class="flex flex-col gap-4 rounded-3xl border-4 border-white min-h-64 h-full max-w-80 sm:max-w-full">
    <div class="flex flex-col gap-4 p-8 items-center w-full">
      <div v-if="image" class=" h-15 w-fit grayscale">
        <img 
          :src="`/img/${image.src}`"
          :alt="image.alt"
          class="w-full h-full object-cover"
        />
        <!-- <img v-else src="" alt="imagen-error"> -->
        <!-- TODO: Add a fallback image -->
      </div>
      <div class="flex flex-col gap-4 items-center text-center">
        <p class="text-center text-base-custom" v-html="description"></p>
        <ButtonCTA v-if="link" color="only-link" :href="link.url" size="lg">
          {{ link.label }}
        </ButtonCTA>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    description: {
        type: String,
        default: ''
    },
    image: {
        type: Object,
        default: null,
    },
    link: {
        type: Object,
        default: null
    },
  },
  computed: {
    langcode() {
      return this.$store.getters.langcode;
    },
  },
}
</script>