<template>
  <section class="rounded-3xl mb-8 px-4 py-12 md:p-12 lg:p-16 bg-gradient-conic-2">
    <div class="flex flex-col lg:flex-row gap-x-12 gap-y-4 mx-auto container justify-center items-center"
      :class="{
        'items-center justify-center': position === 'left',
        'flex-row-reverse items-center justify-center': position === 'right'
      }">
      <div class="h-20.1 w-20.1 rounded-full overflow-hidden border-2 border-white">
        <img 
        v-if="image"
        :src="`/img/${image.src}`"
        :alt="image.alt"
        class="w-full h-full object-cover"
      />
      </div>
      <div class="flex flex-col gap-4 w-full lg:w-2/3">
        <h2 class="font-bold ">{{ title }}</h2>
        <ul 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>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: 'title'
    },
    paragraphs: {
      type: Array,
      default: () => ['description']
    },
    position: {
      type: String,
      default: 'left'
    },
    image: {
      type: Object,
      default: () => ({
        src: '',
        alt: ''
      })
    }
  }
}
</script>