<template>
    <div class="container mx-auto py-8">
      <h1 class="text-3xl font-bold mb-8 text-center">Property Listings</h1>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <Card
          v-for="property in properties"
          :key="property.id"
          :property="property"
          class="card"
        >
        </Card>
      </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const properties = ref([]);

const fetchProperties = async () => {
  try {
    const response = await fetch("/api/house/parse", {
      method: "GET",
    });
    const result = await response.json();
    if (result.success) {
      properties.value = result.data;
    } else {
      console.error(result.message);
    }
  } catch (error) {
    console.error("Error fetching properties:", error);
  }
};

onMounted(() => {
  fetchProperties();
});
</script>

<style scoped>
h1 {
  font-size: x-large;
  font-weight: 700;
  text-align: center;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: top;
  align-items: center;
  overflow: hidden;
}

.blur {
  opacity: 0.6;
  filter: blur(10px);
  backdrop-filter: blur(
    10px
  ); /* Propiedad experimental para algunos navegadores */
}

.card .content {
  padding: 20px;
}

img {
  pointer-events: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
