<template>
  <service-card
    :service="service"
    type="mobiliari-decoracio"
    @view-details="viewDetails"
    @contact-provider="contactProvider"
  >
    <template #additional-info>
      <div class="mobiliari-details">
        <div class="detail-item">
          <img :src="iconMobiliari" alt="Mobiliario" class="icon-img" />
          <span>{{ formatTipologia(service.mobiliari_decoracio.tipologia) }}</span>
        </div>
        <div class="detail-item" v-if="service.mobiliari_decoracio.subtipologia">
          <i class="bi bi-tags"></i>
          <span>{{ service.mobiliari_decoracio.subtipologia }}</span>
        </div>
        <div class="detail-item">
          <i class="bi bi-box"></i>
          <span>{{ service.mobiliari_decoracio.cantidad_min }} - {{ service.mobiliari_decoracio.cantidad_max }} unidades</span>
        </div>
        <div class="detail-item">
          <i class="bi bi-basket"></i>
          <span>{{ service.mobiliari_decoracio.is_rental ? 'Alquiler' : 'Venta' }}</span>
        </div>
        <div class="detail-item" v-if="service.mobiliari_decoracio.color && service.mobiliari_decoracio.color.length">
          <i class="bi bi-palette"></i>
          <div class="caracteristicas">
            <span v-for="(color, idx) in service.mobiliari_decoracio.color"
                  :key="'color-'+idx"
                  class="caracteristica-tag">
              {{ color }}
            </span>
          </div>
        </div>
        <div class="detail-item" v-if="service.mobiliari_decoracio.material && service.mobiliari_decoracio.material.length">
          <i class="bi bi-tools"></i>
          <div class="caracteristicas">
            <span v-for="(material, idx) in service.mobiliari_decoracio.material"
                  :key="'material-'+idx"
                  class="caracteristica-tag">
              {{ material }}
            </span>
          </div>
        </div>
        <div class="detail-item" v-if="service.mobiliari_decoracio.caracteristicas && service.mobiliari_decoracio.caracteristicas.length">
          <i class="bi bi-list-check"></i>
          <div class="caracteristicas">
            <span v-for="(caracteristica, idx) in service.mobiliari_decoracio.caracteristicas"
                  :key="'caracteristica-'+idx"
                  class="caracteristica-tag">
              {{ caracteristica }}
            </span>
          </div>
        </div>
      </div>
    </template>
  </service-card>
</template>

<script>
import ServiceCard from './ServiceCard.vue'
import iconMobiliari from '@/assets/icon_mobiliari2.png'

export default {
  name: 'MobiliariService',
  components: {
    ServiceCard
  },
  props: {
    service: {
      type: Object,
      required: true,
      validator: (obj) => {
        return obj.type === 'mobiliari-decoracio' && obj.mobiliari_decoracio
      }
    }
  },
  data () {
    return {
      iconMobiliari
    }
  },
  methods: {
    viewDetails () {
      this.$emit('view-details', this.service)
    },
    contactProvider () {
      this.$emit('contact-provider', this.service)
    },
    formatTipologia (tipologia) {
      return tipologia
        .replace(/_/g, ' ')
        .replace(/([A-Z])/g, ' $1')
        .replace(/^./, str => str.toUpperCase())
    }
  }
}
</script>

<style scoped>
.icon-img {
  width: 1.1rem;
  height: 1.1rem;
  object-fit: contain;
}

.mobiliari-details {
  padding-top: 1rem;
}

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

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

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

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

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