<template>
  <div class="col-md-4">
    <div class="card-box-a card-shadow">
      <div class="img-box-a">
        <img :src="currentProperty.displayImage" alt class="img-a img-fluid" />
      </div>
      <div class="card-overlay">
        <div class="card-overlay-a-content">
          <div class="card-header-a">
            <h3 class="card-title-a">
              <router-link
                :to="`/property/property/${currentProperty.id}`"
                class="link-a"
              >{{ currentProperty.shortDescription }}</router-link>
            </h3>
          </div>
          <div class="card-body-a">
            <div class="price-box d-flex">
              <span
                v-if="currentProperty.isSale"
                class="price-a"
              >sale | {{ currentProperty.displayPrice }}</span>
              <span
                v-if="!currentProperty.isSale"
                class="price-a"
              >rent | {{ currentProperty.displayPrice }}</span>
            </div>
            <router-link :to="`/property/property/${currentProperty.id}`" class="link-a">
              Click here to view
              <span class="ion-ios-arrow-forward"></span>
            </router-link>
          </div>
          <div class="card-footer-a" v-if="currentProperty.showFooter">
            <ul class="card-info d-flex justify-content-around">
              <li v-if="currentProperty.area !== null">
                <h4 class="card-info-title">Area</h4>
                <span>{{ currentProperty.area }}</span>
              </li>
              <li v-if="currentProperty.beds !== null">
                <h4 class="card-info-title">Beds</h4>
                <span>{{ currentProperty.beds }}</span>
              </li>
              <li v-if="currentProperty.baths !== null">
                <h4 class="card-info-title">Baths</h4>
                <span>{{ currentProperty.baths }}</span>
              </li>
              <li v-if="currentProperty.garages !== null">
                <h4 class="card-info-title">Garages</h4>
                <span>{{ currentProperty.garages }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <br />
  </div>
</template>

<script>
export default {
  props: {
    currentProperty: Object,
  },
};
</script>
