<template>
  <section 
  :id="id"
  class="flex flex-col gap-12 mb-8 px-4 pt-8 pb-16 max-w-3xl mx-auto">
    <div class="flex flex-col justify-center items-center w-full">
      <h2 class=" font-bold mb-6">{{ title }}</h2>
      <p class="text-lg text-center">{{ description }}</p>
    </div>

    <ul  class="grid grid-cols-12 gap-8">
      <li 
        v-for="(item, index) in logos" :key="`logos-${id}-${index}`" 
        class="col-span-12 md:col-span-4 h-20 flex justify-center items-center">
        <img 
          v-if="item"
          :src="`/img/${item.src}`"
          :alt="item.alt"
          class="w-full h-full object-cover grayscale"
        />
      </li>
    </ul>
  </section>
</template>

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