<template>
  <section
    :id="id"
    class="flex flex-col lg:flex-row gap-y-4 p-4 md:py-12 mb-8 rounded-3xl h-full lg: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 text-center"
        :class="{
          'text-iguales-dark': textColor === 'iguales',
        }" v-html="content">
      </h2>
    </div>
    
    <div v-if="shapes.shape_2" class="h-38 w-1/4 ml-auto lg: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>