<template>
  <section class="w-full">
    <!-- ❶ two-column card ----------------------------->
    <div class="flex flex-col md:flex-row gap-4">
      <!-- ◀ left half : image carousel -->
      <AppThumbnailCarousel :images="apartment.images" class="basis-1/3"></AppThumbnailCarousel>

      <!-- ▶ right half : text (top) & icons (bottom) -->
      <div class="basis-2/3 flex flex-col h-full p-4 gap-4">
        <!-- title + intro copy -->
        <div class="flex-1 flex flex-col gap-4">
          <!-- title -->
          <h2 class="text-2xl font-bold">
            {{ apartment.title }}
          </h2>

          <!-- description (optional) -->
          <p
              v-if="true"
              class="text-lg pb-4">
            {{
              apartment.subtitle
            }}
          </p>

          <!-- anything the parent puts in here -->
          <AppFeaturesGrid :features="apartment.features"/>
        </div>
        <div class="flex-1"></div>
        <div class="flex justify-end">
          <div class="flex flex-row gap-4 ">
            <UButton
                :to="p('contact')"
                size="md"
                color="primary"
                variant="outline"
                trailing-icon="i-heroicons-envelope"
            >
              {{ g.button.contact }}
            </UButton>

            <UButton
                :to="p('book')"
                size="md"
                color="primary"
                variant="solid"
                trailing-icon="i-heroicons-calendar-days"
            >
              {{ g.button.book }}
            </UButton>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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