<template>
  <section 
  :id="id"
  class="flex flex-col gap-8 justify-center items-center rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24"
  :class="{
    'bg-gradient-conic-cards': bgColor === 'gradient-conic',
    'bg-gradient-conic-green': bgColor === 'gradient-conic-green',
    'bg-linear-to-t from-consumo-extra-light to-background-light': bgColor === 'consumo',
    'bg-linear-to-t from-iguales-extra-light to-background-light': bgColor === 'iguales',
    'bg-linear-to-t from-aula-extra-light to-background-light': bgColor === 'aula',
    'bg-linear-to-t from-certifica-light to-background-light': bgColor === 'certifica',
    'bg-linear-to-t from-foro-light to-background-light': bgColor === 'foro',
    'bg-linear-to-t from-ods-extra-light to-background-light': bgColor === 'ods',
  }">
    <div 
    class="mx-auto  text-center"
    :class="{
      'flex flex-col justify-center items-center w-full': titlePosition === 'center',
      'flex flex-col items-start w-full': titlePosition === 'left',
    }">
      <h2 class="font-bold mb-6">{{ title }}</h2>
      <p v-if="description" class="text-lg-custom max-w-4xl" v-html="description"></p>
    </div>

    <ul  class="grid grid-cols-12 gap-8 ">
      <li 
        v-for="(item, index) in cards" :key="`cards-${id}-${index}`" class=""
        :class="{
          'col-span-12 lg:col-span-6': display === 'col-2',
          'col-span-12 md:col-span-6 lg:col-span-4': display === 'col-3',
          'col-span-12 lg:col-span-4': display === 'col-3-transparent',
          'col-span-12 md:col-span-6 lg:col-span-3': display === 'col-4',
        }">
        <CardTool
          v-if="cardsType === 'colored' || cardsType === 'number' || cardsType === 'transparent'"
          :color="item.color"
          :title="item.title"
          :description="item.description"
          :image="item.image"
          :link="item.link"
          :number="item.number"
          class=""
        />
        <CardCourse
          v-if="cardsType === 'course'"
          :color="item.color"
          :title="item.title"
          :description="item.description"
        />
        <CardCompany
          v-if="cardsType === 'company'"
          :description="item.description"
          :image="item.image"
          :link="item.link"
        />
      </li>
    </ul>
    <div v-if="hasButton && buttonSection" class="flex flex-col justify-center items-center mt-8">
      <h4 v-if="buttonSection.title" class="font-semibold uppercase text-center">{{ buttonSection.title }}</h4>
        <ButtonCTA v-if="buttonSection.button" :color="buttonSection?.button?.color" :to="buttonSection?.button?.link" class="uppercase mt-6">
          {{ buttonSection?.button?.label }}
        </ButtonCTA>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: "",
    },
    titlePosition: {
      type: String,
      default: "center",
    },
    title: {
      type: String,
      default: "",
    },
    description: {
      type: String,
      default: "",
    },
    display: {
      type: String,
      default: "col-3",
    },
    bgColor: {
      type: String,
      default: "",
    },
    cardsType: {
      type: String,
      default: "transparent", // 'colored', 'number', 'transparent'
    },
    cards: {
      type: Array,
      default: () => [],
    },
    hasButton: {
      type: Boolean,
      default: false,
    },
    buttonSection: {
      type: Object,
      default: null
    },
  },
  
};
</script>
