<template>
  <section 
  :id="id"
  class="flex flex-col gap-8 lg:gap-21 rounded-3xl mb-8 px-4 pt-12 pb-16 md:p-16 md:pb-24 bg-gradient-conic-2 ">
    <div class="flex flex-col justify-center items-center w-full">
      <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
      <p class="mb-8 text-lg">{{ description }}</p>
    </div>

    <ul  class="grid grid-cols-12 gap-8 mx-auto">
      <li v-for="(item, index) in cards" :key="`cards-${id}-${index}`" class="col-span-12 md:col-span-6 lg:col-span-4">
        <CardTool
          :color="item.color"
          :title="item.title"
          :description="item.description"
          :image="item.image"
          :link="item.link"
          class=""
        />
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    description: {
      type: String,
      default: "",
    },
     cards: {
      type: Array,
      default: () => [],
    },
  },
  
};
</script>
