<template>
  <UiContainer class="space-y-[30px] xl:space-y-[55px]">
    <div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5">
      <div
        class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto"
      >
        <h1 class="h1">
          <span
            v-for="(item, index) in component.front_section_lang[0].data.title"
            :key="index"
            :class="[
              item.highlight
                ? 'text-accent-green-light dark:text-accent-green-dark'
                : '',
              'inline',
            ]"
          >
            {{ item.text }}
            <span
              v-if="
                index !== component.front_section_lang[0].data.title.length - 1
              "
            />
          </span>
        </h1>
        <h4 class="h4-uppercase-bold-inter">
          <span
            v-for="(item, index) in component.front_section_lang[0].data
              .sub_title"
            :key="index"
            :class="{
              'text-accent-green-light dark:text-accent-green-dark':
                item.highlight,
            }"
          >
            {{ item.text }}
          </span>
        </h4>
        <p>{{ component.front_section_lang[0].data.description }}</p>
      </div>
      <div
        class="w-full xl:max-w-[570px] h-[390px] sm:h-[506px] block rounded-2xl"
        :style="{
          backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }"
      />
    </div>
    <div class="flex flex-col xl:flex-row items-stretch w-full h-full gap-5">
      <div
        class="w-full xl:max-w-[570px] h-[225px] block rounded-2xl"
        :style="{
          backgroundImage: `url('/api/public/file/${component.img[1]}_l.webp')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }"
      />
      <div
        class="flex flex-col justify-between items-center space-25-55 xl:gap-4 w-auto h-auto"
      >
        <p>{{ component.front_section_lang[0].data.description_second }}</p>
        <h4 class="h4-uppercase-bold-inter">
          {{ component.front_section_lang[0].data.sub_title_second }}
        </h4>
      </div>
    </div>
  </UiContainer>
</template>

<script lang="ts" setup>
defineProps<{
  component: {
    id: number
    name: string
    img: string[]
    component_name: string
    is_no_lang: boolean
    page_name: string
    front_section_lang: {
      data: {
        title: {
          text: string
          highlight: boolean
        }[]
        sub_title: {
          text: string
          highlight: boolean
        }[]
        description: string
        description_second: string
        sub_title_second: string
      }
      id_front_section: number
      id_lang: number
    }[]
  }
}>()
</script>
