<template>
  <service-card
    :service="service"
    type="espai"
    @view-details="$emit('view-details', service)"
    @contact-provider="$emit('contact-provider', service)"
  >
    <template #additional-info>
      <div class="espai-details">
        <div class="detail-item">
          <i class="bi bi-building"></i>
          <span>{{ getEspaiTypeLabel(service.espai.espai_type) }}</span>
        </div>
        <div class="detail-item">
          <i class="bi bi-people"></i>
          <span>{{ service.espai.capacitat_min }} - {{ service.espai.capacitat_max }} personas</span>
        </div>
        <div v-if="service.espai.caracteristicas && service.espai.caracteristicas.length > 0" class="detail-item">
          <i class="bi bi-list-check"></i>
          <div class="caracteristicas">
            <span v-for="(caracteristica, index) in service.espai.caracteristicas"
                  :key="index"
                  class="caracteristica-tag">
              {{ caracteristica }}
            </span>
          </div>
        </div>
      </div>
    </template>
  </service-card>
</template>

<script>
import ServiceCard from './myServiceCard.vue'

export default {
  name: 'EspaiService',
  components: {
    ServiceCard
  },
  props: {
    service: {
      type: Object,
      required: true,
      validator: (obj) => {
        return obj.type === 'espai' && obj.espai !== undefined
      }
    }
  },
  methods: {
    getEspaiTypeLabel (type) {
      const labels = {
        'masia': 'Masía',
        'restaurante': 'Restaurante',
        'hotel': 'Hotel',
        'local': 'Local',
        'sala': 'Sala',
        'comedor': 'Comedor',
        'discoteca': 'Discoteca',
        'espacio_de_actividades': 'Espacio de Actividades',
        'terraza': 'Terraza',
        'atico': 'Ático',
        'castillo': 'Castillo',
        'jardin': 'Jardín',
        'casa_rural': 'Casa Rural',
        'finca': 'Finca',
        'molino': 'Molino',
        'villa': 'Villa',
        'hacienda': 'Hacienda',
        'espacio_singular': 'Espacio Singular',
        'palacio': 'Palacio',
        'bosque': 'Bosque',
        'otros': 'Otros'
      }
      return labels[type] || type
    }
  }
}
</script>

<style scoped>
.espai-details {
  padding: 0rem;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: #2C3E50;
}

.detail-item i {
  color: #333;
  font-size: 1rem;
}

.caracteristicas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 2;
  margin-top: 0.2rem;
  margin-bottom: 0.3rem;
}

.caracteristica-tag {
  background: rgb(213, 213, 213);
  color: #2C3E50;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  margin-top: -0.2rem;
  display: inline-block;
}
</style>
