<template>
  <section 
    class="rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16"
    :class="{
      'bg-gradient-conic-2': bgColor === 'conic-2',
      'bg-gradient-conic-base': bgColor === 'conic-base',
      'bg-gradient-conic-base-gray': bgColor === 'conic-base-gray',
      'bg-background-light': bgColor === 'light'
    }">
    <div 
      class="flex justify-between"
      :class="{
        'flex-col lg:flex-row gap-4': position === 'left',
        'flex-col lg:flex-row-reverse gap-4': position === 'right' && !imageCTA,
        'flex-col-reverse lg:flex-row-reverse gap-4': position === 'right' && imageCTA,
        'items-center gap-12': image.display === 'circle'
      }">

      <div 
      :class="{
        'flex flex-col gap-4': imageCTA
        }">
        <div 
          v-if="image"
          :class="{
            'h-20.1 w-20.1 rounded-full overflow-hidden border-4 border-white': image.display === 'circle',
            'h-fit w-full lg:w-auto': image.display === 'normal'
          }">
          <img 
            :src="`/img/${image.src}`"
            :alt="image.alt"
            class="w-full h-full"
            :class="{
              'object-cover': image.display === 'circle',
              'object-contain': image.display === 'normal'
            }"
          />
        </div>
        <div v-if="imageCTA" class="flex flex-col items-end">
          <p v-if="imageCTA.description" class="text-lg mt-2">{{ imageCTA.description }}</p>
          <NuxtLink v-if="imageCTA.button" :to="imageCTA.button.url">
            <ButtonCTA size="md" class="uppercase mt-4">{{ imageCTA.button.label }}</ButtonCTA>
          </NuxtLink>
        </div>
      </div>

      <div 
        class="flex flex-col gap-4 w-full"
        :class="{
          'lg:w-2/3': image.display === 'circle',
          'lg:w-1/2': image.display === 'normal',
        }">
        <h2 class="font-bold ">{{ title }}</h2>
        <ul v-if="paragraphs" class="flex flex-col gap-6">
          <li v-for="(paragraph, index) in paragraphs" :key="`paragraph-${id}-${index}`">
            <p class="text-lg" v-html="paragraph"></p>
          </li>
        </ul>
        <div v-for="(list, index) in lists" :key="`list-${index}-${index}`" class="">
          <p v-if="list.description" class="text-lg mb-4">{{ list.description }}</p>
          <ul v-if="list.items" class="flex flex-col gap-4">
            <li
              v-for="(item, index) in list.items" 
              :key="`item-list-${id}-${index}`"
              :class="{
                'list-disc ml-6': hasBullets,
              }">
              <p class="text-lg" v-html="item"></p>
            </li>
          </ul>
        </div>
        <p class="text-lg" v-html="finalParagraph"></p>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: 'title'
    },
    paragraphs: {
      type: Array,
      default: () => []
    },
    lists: {
      type: Array,
      default: () => []
    },
    finalParagraph: {
      type: String,
      default: ''
    },
    hasBullets: {
      type: Boolean,
      default: false
    },
    position: {
      type: String,
      default: 'left'
    },
    bgColor: {
      type: String,
      default: 'conic-2'
    },
    image: {
      type: Object,
      default: null
    },
    imageCTA: {
      type: Object,
      default: null
    }
  }
}
</script>