<template>
  <div
    class="flex flex-col gap-4 rounded-3xl"
    :class="{
      'border-4 border-white min-h-64': color === 'number',
      'border-4 border-white min-h-20.9': color === 'transparent',
      'shadow-tool-card hover:border-4 border-white transition-all duration-300 ease-in-out min-h-21.8 min-w-80 max-w-80': color !== 'transparent' && color !== 'number',
      'bg-consumo-base hover:bg-linear-to-t hover:from-consumo-base hover:to-consumo-extra-light': color === 'consumo',
      'bg-iguales-base hover:bg-linear-to-t hover:from-iguales-base hover:to-iguales-extra-light': color === 'iguales',
      'bg-aula-base hover:bg-linear-to-t hover:from-aula-base hover:to-aula-extra-light': color === 'aula',
      'bg-certifica-base hover:bg-linear-to-t hover:from-certifica-base hover:to-certifica-extra-light': color === 'certifica',
      'bg-foro-base hover:bg-linear-to-t hover:from-foro-base hover:to-foro-extra-light': color === 'foro',
      'bg-ods-base hover:bg-linear-to-t hover:from-ods-base hover:to-ods-extra-light': color === 'ods',
    }"
  >
    <NuxtLink v-if="link" :to="`/${langcode}/${link}`" class="p-8">
      <div class="h-10.2 w-full">
        <img 
          v-if="image"
          :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">
        <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
        <p class="text-center text-base" v-html="description"></p>
      </div>
    </NuxtLink>
    <div v-if="!link" class="flex flex-col gap-4 p-8 items-center w-full">
      <div v-if="image" class="h-25 w-25">
        <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 v-if="number" class="h-15 w-15">
        <h3 class="w-full h-full rounded-full border font-bold flex items-center justify-center">
        {{ number }}</h3>
      </div>
      <div class="flex flex-col gap-4 items-center text-center">
        <p class="text-5.5 font-semibold uppercase">{{ title }}</p>
        <p class="text-center text-base" v-html="description"></p>
      </div>
    </div>
  </div>
</template>

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