<template>
  <div class="espai-propi-details">
    <div class="espai-header">
      <i class="bi bi-house-fill"></i>
      <span class="espai-title">Espacio propio</span>
      <span v-if="enUso" class="badge-en-uso">En uso</span>
    </div>
    <div class="espai-info-row">
      <span><b><i class="bi bi-card-text"></i> Nombre:</b> {{ espai.nombre }}</span>
      <span><b><i class="bi bi-person-arms-up"></i> Tipo:</b> {{ espai.tipus }}</span>
      <span><b><i class="bi bi-people"></i> Capacidad:</b> {{ espai.capacitat_aproximada }}</span>
    </div>
    <div class="espai-info-row">
      <span><b><i class="bi bi-info-circle"></i> Descripción:</b> {{ espai.descripcion }}</span>
    </div>
    <div class="espai-info-row">
      <span><b><i class="bi bi-geo-alt"></i> Dirección:</b> {{ espai.address.direccion }}, {{ espai.address.ciudad }} ({{ espai.address.codigo_postal }}, {{ espai.address.provincia }})</span>
    </div>
    <div class="espai-info-row">
      <b>Características:</b>
      <span v-for="car in espai.caracteristicas" :key="car" class="car-tag">{{ car }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EspaiPropiDetails',
  props: {
    espai: { type: Object, required: true },
    enUso: { type: Boolean, default: false }
  }
}
</script>

<style scoped>
.espai-propi-details {
  padding: 1.2rem 1.5rem;
  background: none;
  border: none;
  box-shadow: none;
}
.espai-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #800020;
  font-weight: 700;
}
.espai-title {
  font-size: 1.1rem;
  color: #800020;
  font-weight: 700;
}
.badge-en-uso {
  background: #f8d7da;
  color: #800020;
  border-radius: 8px;
  padding: 0.2rem 0.7rem;
  font-size: 0.95rem;
  margin-left: 1rem;
  font-weight: 600;
}
.espai-info-row {
  margin-bottom: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  color: #333;
  font-size: 1rem;
  text-align: left;
}
.car-tag {
  display: inline-block;
  background:rgb(222, 222, 222);
  color: #333;
  border-radius: 8px;
  padding: 0.2rem 0.8rem;
  margin-right: 0rem;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
  display: inline-block;
  border: 1px solid #e0e0e0;
  font-weight: 600;
}
</style>
