<template>
  <service-card
    :service="service"
    type="mobiliari-decoracio"
    @view-details="$emit('view-details', service)"
    @contact-provider="$emit('contact-provider', service)"
  >
    <template #additional-info>
      <div class="decoracio-details">
        <div class="detail-item">
          <i class="bi bi-flower2"></i>
          <span>{{ service.mobiliari_decoracio.tipologia }}</span>
        </div>
        <div v-if="service.mobiliari_decoracio.subtipologia" class="detail-item">
          <i class="bi bi-tags"></i>
          <span>{{ service.mobiliari_decoracio.subtipologia }}</span>
        </div>
        <div class="detail-item">
          <i class="bi bi-box"></i>
          <span>Cantidad: {{ service.mobiliari_decoracio.cantidad_min }} - {{ service.mobiliari_decoracio.cantidad_max }} unidades</span>
        </div>
        <div v-if="service.mobiliari_decoracio.color && service.mobiliari_decoracio.color.length > 0" class="detail-item">
          <i class="bi bi-palette"></i>
          <div class="caracteristicas">
            <span v-for="(color, index) in service.mobiliari_decoracio.color"
                  :key="index"
                  class="tag">
              {{ color }}
            </span>
          </div>
        </div>
        <div v-if="service.mobiliari_decoracio.material && service.mobiliari_decoracio.material.length > 0" class="detail-item">
          <i class="bi bi-tools"></i>
          <div class="caracteristicas">
            <span v-for="(material, index) in service.mobiliari_decoracio.material"
                  :key="index"
                  class="tag">
              {{ material }}
            </span>
          </div>
        </div>
        <div v-if="service.mobiliari_decoracio.caracteristicas && service.mobiliari_decoracio.caracteristicas.length > 0" class="detail-item">
          <i class="bi bi-list-check"></i>
          <div class="caracteristicas">
            <span v-for="(caracteristica, index) in service.mobiliari_decoracio.caracteristicas"
                  :key="index"
                  class="tag">
              {{ caracteristica }}
            </span>
          </div>
        </div>
      </div>
    </template>
  </service-card>
</template>

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

export default {
  name: 'DecoracioService',
  components: {
    ServiceCard
  },
  props: {
    service: {
      type: Object,
      required: true,
      validator: (obj) => {
        return obj.type === 'mobiliari-decoracio' &&
               obj.mobiliari_decoracio !== undefined &&
               obj.mobiliari_decoracio.service_type === 'decoracion'
      }
    }
  }
}
</script>

<style scoped>
.decoracio-details {
  padding-top: 1rem;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  color: #333;
  font-size: 1rem;
}

.detail-item i {
  color: #333;
  font-size: 1.1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.detail-item span {
  line-height: 1;
  padding-top: 0.3rem;
}

.caracteristicas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  flex: 1;
  font-size: 0.9rem;
}

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