<template>
  <div class="offerSide">
    <div class="card">
      <div class="container">
        <h4><b>Matched Offer Information</b></h4>
        <p>Space Located City: {{ offer.spaceLocateCity }}</p>
        <p>Space Located State: {{ offer.state }}</p>
        <p>Available Time start: {{ offer.availableTimeStart }}</p>
        <p>Available Time end: {{ offer.availableTimeEnd }}</p>
        <p>Max People: {{ offer.maxNumberOfPeople }}</p>
        <p v-if="offer.offering">It is offering now</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { OfferFormModel } from "@/models/OfferFormModel";

const props = defineProps<{
  offer: OfferFormModel;
}>();
</script>

<style scoped>
.offerSide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 40%;
  text-align: center;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
}
</style>