<template>
  <div class="c-property-list">
    <div class="c-property-list__container">
      <div class="row g-0">
        <div :class="columnsClass" v-for="item in propertyListItems" :key="item.imageUrl">
          <div class="c-property-list__item">
            <img class="c-property-list__item-image" :alt="item.name" :src="item.imageUrl" />
            <div class="c-property-list__text">
              <h3 class="c-property-list__item-name">
                {{ item.name }}
              </h3>
              <span class="c-property-list__item-value">
                {{ item.value }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type PropertyListItem from '../../models/PropertyListItem';

defineProps<{
  propertyListItems: PropertyListItem[];
  columnsClass: string;
  modifiers?: never;
}>();

</script>
