<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.section_lang_data.title"
            :key="index"
            :class="[
              item.highlight
                ? 'text-accent-green-light dark:text-accent-green-dark'
                : '',
              'inline',
            ]"
          >
            {{ item.text }}
            <span v-if="index !== component.section_lang_data.title.length - 1">
            </span>
          </span>
        </h1>
        <h4 class="h4-uppercase-bold-inter">
          <span
            v-for="(item, index) in component.section_lang_data.sub_title"
            :key="index"
            :class="{
              'text-accent-green-light dark:text-accent-green-dark':
                item.highlight,
            }"
          >
            {{ item.text }}
          </span>
        </h4>
        <p>{{ component.section_lang_data.description }}</p>
      </div>
      <div
        class="w-full xl:max-w-[570px] h-[390px] sm:h-[506px] block rounded-2xl"
        :style="{
          backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=640x0')`,
          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/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=640x0')`,
          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.section_lang_data.description_second }}</p>
        <h4 class="h4-uppercase-bold-inter">
          {{ component.section_lang_data.sub_title_second }}
        </h4>
      </div>
    </div>
  </UiContainer>
</template>

<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
  image_collection: string;
  section_id: string;
  section_img: string;
  section_lang_data: {
    title: [
      {
        text: string;
        highlight: boolean;
      }
    ];
    sub_title: [
      {
        text: string;
        highlight: boolean;
      }
    ];
    description: string;
    description_second: string;
    sub_title_second: string;
  };
};
</script>
