<script setup lang="ts">
const { g, p } = useContentInjected()
defineProps<{ apartment: any; index: number }>()

const version = ref(0)
const loaded = new Set<string>()

function updateVersion(img: string) {
  if (!loaded.has(img)) {
    loaded.add(img)
    ++version.value
  }
}
</script>

<template>
  <div :id="g.apartments[index].id" class="rp-2">
    <XContainerHeroContentButtons hero="top" buttons="bottom">
      <template #hero>
        <UCarousel
          :key="version"
          v-slot="{ item }"
          loop
          arrows
          dots
          autoplay
          :items="apartment.images"
          :ui="{
            root: 'mb-12',
            container: '',
            item: 'basis-auto transition-opacity',
            controls: 'relative translate-y-8',
            arrows: '',
            dots: 'absolute inset-x-0 -bottom-0 flex flex-wrap items-center justify-center gap-2 @md:gap-3 translate-y-0.5',
            prev: 'start-0 sm:-start-0 -top-4 -translate-y-0',
            next: 'end-0 sm:-end-0 -top-4 -translate-y-0',
            dot: 'w-2 @md:w-4 h-1',
          }"
        >
          <div class="h-60 flex flex-row justify-center">
            <NuxtImg :src="item" class="h-full" @load="updateVersion(item)" />
          </div>
        </UCarousel>
      </template>

      <template #buttons>
        <XContainerButtons align="right" :stretch="false">
          <AppButton type="contact" variant="outline" />
          <AppButton type="book" color="primary" />
        </XContainerButtons>
      </template>

      <div class="flex flex-col">
        <XText as="section" :text="apartment.title" />
        <XText as="paragraph" :text="apartment.subtitle" />
        <XGridIconLabelDetail
          :items="apartment.features"
          :ux="{ icon: 'mt-0', texts: 'justify-center', label: 'font-medium' }"
        />
      </div>
    </XContainerHeroContentButtons>
  </div>
</template>
