<template>
  <div 
  class="flex flex-col rounded-3xl border-4 border-white min-h-64 w-full"
  :class="{
    'bg-consumo-extra-light': color === 'consumo',
      'bg-iguales-extra-light': color === 'iguales',
      'bg-aula-extra-light': color === 'aula',
      'bg-certifica-extra-light': color === 'certifica',
      'bg-foro-extra-light': color === 'foro',
      'bg-ods-extra-light': color === 'ods',
    }">
    <div class="flex flex-col gap-2 bg-white px-6 py-8 rounded-b-2xl mt-auto min-h-44">
      <h4 class="text-5.5 font-semibold uppercase">{{ title }}</h4>
      <p class="text-base" v-html="description"></p>
    </div>
  </div>
</template>

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