<template>
	<div class="container-all">
		<a :href="propertyLink()" class="mb-10 cursor-pointer w-100">
			<div class="img-col">
				<img
					:alt="props.property.properties.name"
					:src="props.property?.property_images?.[0]?.full_path_large"
				/>
			</div>

			<div class="details">
				<div class="rating">
          <!--
					<v-rating
						:model-value="props.property.properties.property_rating"
						:readonly="true"
						:size="14"
						active-color="#efa80f"
						color="#dddddd"
						empty-icon="mdi-star-outline"
						full-icon="mdi-star"
					></v-rating>
          -->
					<!-- <span>5 reviews</span> -->
				</div>
				<h3 class="sas-title">{{ props.property.properties.name }}</h3>
				<div class="property-details">
					<div class="price-box">
						Start at
						<span class="price">
							{{
								toMoney(
									props.property?.property_pricings
										?.base_price ?? 0,
									props.property?.properties?.currency_code,
								)
							}}
						</span>
						/ Night
					</div>
					<div class="desc">
						{{
							property.properties.property_descriptions
								.description
						}}
					</div>
				</div>
			</div>
		</a>
	</div>
</template>

<script setup>
const {computed} = Vue;

const props = defineProps({
	loading: {
		type: [Boolean],
		default: false,
	},
	property: {
		type: [Boolean, Object],
		default: () => ({}),
	},
	width: {
		type: [Number, String],
		default: "360",
	},
});

const property = computed(() => {
	return window.useProperty(props.property);
});

const propertyLink = () => {
	return `${window.env.site_url}/${window.env.sas_route_vendor_property_main_featured}/${props.property.properties.id}/${props.property.properties.slug}`;
};

const toMoney = (moneyData, currency) => {
	return window.money(moneyData, currency);
};
</script>

<style scoped>
.container-all {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.container-all a {
	text-decoration: none;
}

.container-all .img-col {
	height: 300px;
}

.container-all .img-col img {
	height: 300px;
	object-fit: cover;
	width: 100%;
	aspect-ratio: 16/9;
}

@media screen and (max-width: 595px) {
	.container-all .img-col img {
		width: 100%;
	}
}

.container-all .sas-title {
	font-size: 18px !important;
	color: #000;
  font-weight: 500;
  font-family: 'Poppins' !important;
  margin: 0;
  margin-top: 1rem;
}

.container-all .details {
  text-align: end;
}

.container-all .property-details .price-box {
	font-size: 1rem;
	color: #000;
	margin-bottom: 0.5rem;
  font-weight: 300;
}

.container-all .property-details .price-box .price {
	font-size: 1rem;
	font-weight: 600;
}

.container-all .property-details .desc {
	font-size: 0.8rem;
	color: #666666;
	margin-bottom: 1rem;
	display: none;
}

.container-all .property-details .info {
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.container-all .property-details .info .status {
	color: #666666;
}

.container-all .property-details .info .status span {
	color: #cc3333;
}

.container-all .property-details .info .info-item {
	color: #666666;
	line-height: 2em;
}

.container-all .property-details .info .info-item span {
	color: #000;
}

.container-all .property-details .view-more {
	font-size: 0.9rem;
	color: #FFF;
  background-color: #000;
	text-decoration: none;
  padding: 0 30px !important;
}
</style>
