<template>
	<div class="d-flex flex-column align-start container-card">
		<v-carousel
			:show-arrows="property.property_images.length > 1"
			height="265px"
			hide-delimiters
			style="width: 100%"
		>
			<v-carousel-item
				v-for="(img, i) in property.property_images"
				:key="img.id"
			>
				<img
					:src="img.full_path_medium"
					alt=""
					style="width: 100%; height: 100%; object-fit: cover"
					@error="property.property_images.splice(i, 1)"
				/>
			</v-carousel-item>

			<v-carousel-item
				v-if="
					property.property_images &&
					property.property_images.length === 0
				"
			>
				<img
					:src="imageFallback"
					alt=""
					style="width: 100%; height: 100%; object-fit: cover"
				/>
			</v-carousel-item>
		</v-carousel>

		<div
			class="d-flex flex-column align-start w-100 border pa-4"
			@click="redirect"
		>
			<span
				:class="property.properties.property_rating ? '' : 'mb-4'"
				class="title"
			>
				{{ property.properties.name }}
			</span>
			<v-rating
				v-if="property.properties.property_rating"
				:model-value="property.properties.property_rating"
				active-color="yellow-accent-4"
				class="mb-4"
				color="#888"
				density="compact"
				readonly
				size="20"
			/>

			<span class="text-grey text-sm-subtitle-2">
				Rooms:
				<span class="text-black">{{ property.resume.rooms }}</span>
			</span>
			<span class="text-grey text-sm-subtitle-2">
				Bathrooms:
				<span class="text-black">{{ property.resume.bathrooms }}</span>
			</span>
			<span class="text-grey text-sm-subtitle-2">
				Guests:
				<span class="text-black">{{
					property.property_basic_informations.property_restrictions
						.maximum_guests
				}}</span>
			</span>

			<v-row
				class="w-100 ma-0 border-t mt-3 pt-3"
				justify="space-between"
			>
				<span>Details</span>
				<div class="price-box text-grey text-sm-subtitle-2">
					Starting at
					<span class="price">{{
						toMoney(
							property.property_pricings?.base_price ?? null,
							property.properties?.currency_code,
						)
					}}</span>
					/ Night
				</div>
			</v-row>
		</div>
	</div>
</template>

<script setup>
const { computed } = Vue;

const props = defineProps({
	property: {
		type: [Object],
		default: () => ({}),
	},
	imageFallback: {
		type: String,
		default: "",
	},
});

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

const redirect = () => {
	window.location.href = `/${window.env.sas_route_vendor_property_main_featured}/${property.value.properties.id}/${property.value.properties.slug}`;
};

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

<style scoped>
.container-card {
	max-width: 370px;
	height: auto;
	cursor: pointer;

	@media screen and (max-width: 600px) {
		max-width: 100%;
	}

	.title {
		font-size: 18px;
		color: #000000;
		line-height: normal;
		font-weight: 700;
		font-family: "Playfair Display";
		text-align: left;
		margin: 0;
	}

	.price-box {
		font-size: 14px;
		color: #000;

		.price {
			font-size: 17px;
			font-weight: 600;
			color: #cc3333;
		}
	}
}
</style>
