<template>
  <section
    :id="id"
    class="flex p-8 md:p-12 mb-8 rounded-3xl h-69">
    <div v-if="shapes.shape_1" class="h-38 w-1/4 flex items-start justify-center">
      <img 
      :src="`/img/${shapes.shape_1}`" 
      alt="hero background shape right" 
      class="h-full w-full object-contain" >
    </div>

    <div class="flex flex-col items-center justify-center gap-4 md:gap-8 w-full">
      <h2 
        class="font-semibold italic"
        :class="{
          'text-consumo-dark': textColor === 'consumo',
          'text-iguales-dark': textColor === 'iguales',
          'text-aula-dark': textColor === 'aula',
          'text-certifica-dark': textColor === 'certifica',
          'text-foro-dark': textColor === 'foro',
          'text-ods-dark': textColor === 'ods',
        }" v-html="content">
      </h2>
    </div>
    
    <div v-if="shapes.shape_2" class="h-38 w-1/4 mt-auto">
      <img 
      :src="`/img/${shapes.shape_2}`" 
      alt="hero background shape right" 
      class="h-full w-full object-contain" >
    </div>
  </section>
</template>

<script>

export default {
  props: {
    id: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    textColor: {
      type: String,
      default: "consumo",
    },
    shapes: {
      type: Object,
      default: () => ({
        shape_1: "",
        shape_2: "",
      }),
    },
  },
  
};
</script>