<template>
  <div class="box" style="padding-bottom: 40px;">
    <h3 class="title-configs">House configuration</h3>
    <div
      :style="{
        '--swiper-navigation-size': '10px',
        'text-align': 'center',
      }"
      class="swiper"
    >
      <div class="swiper-wrapper">
        <template v-for="item in propertyData.property_house_configurations" :key="item.id">
            <div class="swiper-slide">
              <v-col>
                <v-icon :icon="item.icon" />
                <div>
                  {{ item?.name }}
                  {{
                    item.property_house_configuration_amenities &&
                    item.property_house_configuration_amenities.length
                        ? ':'
                        : ''
                  }}
                </div>
                <div
                    v-for="(furniture, i) in item.property_house_configuration_amenities"
                    :key="i"
                    class="house-configurations-icons-additions"
                >
                  {{ furniture?.amenity?.name }}
                  {{
                    furniture.quantity > 1
                        ? `(x${furniture.quantity})`
                        : ''
                  }}
                </div>
              </v-col>
            </div>
        </template>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>
  
<script setup>
const props = defineProps({ property: { type: Object, default: () => ({}) } });
const propertyData = Vue.ref();
propertyData.value = window.useProperty(props.property);
const isMobile = Vue.computed(() => {
  return window.screen.width <= 550
});
Vue.onMounted(() => {
  const swiper = new window.Swiper('.box .swiper', {
    direction: 'horizontal',
    slidesPerView: isMobile.value ? 2 : 4,
    spaceBetween: 50,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  })
})
</script>

<style scoped>
.swiper-button-prev, .swiper-button-next {
  border: 2px solid #808080;
  border-radius: 50%;
  padding: 5px;
  background: #808080;
  color: #FFF;
  width: 15px;
  height: 15px;
}
</style>