<template>
  <section 
  :id="id"
  class="flex flex-col-reverse lg:flex-row gap-8 lg:gap-21 rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16 bg-gradient-conic-2 ">
    <div class="flex flex-col lg:w-3/5">
      <div class="flex flex-col">
        <h2 class="text-4xl font-bold mb-6">{{ title }}</h2>
        <p class="mb-8 text-lg-custom" v-html="description"></p>
      </div>

      <ul  class="flex flex-col gap-4 mb-8">
        <li v-for="(item, index) in items" :key="`item-${index}`" class="flex items-center gap-4">
          <img v-if="item.icon" :src="`/svg/${item.icon}`" :alt="`icon-${item.icon}`" class="w-8 h-8" />
          <p class="text-lg-custom" v-html="item.content"></p>
        </li>
      </ul>
      <ButtonCTA v-if="button" :to="`/${langcode}/${button.link}`" :color="button.color" class="uppercase w-fit">
        {{ button.label }}
      </ButtonCTA>
    </div>
    <div class="lg:w-2/5 h-full">
      <img 
        v-if="image"
        :src="`/img/${image.src}`"
        :alt="image.alt"
        class="w-full h-full object-cover"
      />
    </div>
  </section>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    description: {
      type: String,
      default: "",
    },
    image: {
      type: Object,
      default: () => ({
        src: "",
        alt: "",
      }),
    },
    items: {
      type: Array,
      default: () => [],
    },
    button: {
      type: Object,
      default: () => ({
        label: "",
        link: "",
      }),
    },
  },
  computed: {
    langcode() {
      return this.$store.getters.langcode;
    },
  },
  
};
</script>
