<template>
  <div 
  class="flex flex-col rounded-3xl border-4 border-white min-h-56 max-h-full max-w-80 sm:max-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-xl mt-14 min-h-48">
      <h4 class="font-semibold uppercase">{{ title }}</h4>
      <p class="text-base-custom" 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>