<template>
	<div class="box" style="padding-bottom: 40px">
		<h3 class="title-configs">Basic information</h3>
		<v-row class="text-center">
			<v-col
				v-for="item in propertyData.property_basic_informations?.items"
				:key="item.id"
				cols="6"
				lg="3"
				md="3"
				sm="6"
			>
				<v-icon :icon="item.icon"></v-icon>
				<div v-html="item.name"></div>
			</v-col>
			<v-col
				v-if="
					propertyData.property_amenities?.filter(
						(el) => el?.amenity_category_id === 40
					).length
				"
				class="basic-icons text-center"
				cols="6"
				lg="3"
				md="3"
				sm="6"
			>
				<div class="icon sasicon-420 text-success"></div>
				<div class="icon-info">Options Available</div>
			</v-col>
		</v-row>
	</div>
</template>

<script setup>
const props = defineProps({ property: { type: Object, default: () => ({}) } });
const propertyData = Vue.ref();
propertyData.value = window.useProperty(props.property);
</script>

<style scoped></style>
