<template>
  <service-card
    :service="service"
    type="fotografia"
    @view-details="viewDetails"
    @contact-provider="contactProvider"
  >
    <template #additional-info>
      <div class="fotografia-details">
        <div class="detail-item" v-if="service.fotografia.servicio_especial_type">
          <i class="bi bi-camera"></i>
          <span>{{ formatFotografiaType(service.fotografia.fotografia_type) }} - {{ formatServicioEspecial(service.fotografia.servicio_especial_type) }}</span>
        </div>
        <div v-else class="detail-item">
          <i class="bi bi-camera"></i>
          <span>{{ formatFotografiaType(service.fotografia.fotografia_type) }}</span>
        </div>
        <div class="detail-item">
          <i class="bi bi-clock"></i>
          <span>{{ service.fotografia.duracion }} horas</span>
        </div>
        <div class="detail-item" v-if="service.fotografia.caracteristicas && service.fotografia.caracteristicas.length > 0">
          <i class="bi bi-check-circle"></i>
          <div class="caracteristicas">
            <span v-for="(caracteristica, index) in service.fotografia.caracteristicas"
                  :key="'caracteristica-'+index"
                  class="caracteristica-tag">
              {{ caracteristica }}
            </span>
          </div>
        </div>
      </div>
    </template>
  </service-card>
</template>

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

export default {
  name: 'FotografiaService',
  components: {
    ServiceCard
  },
  props: {
    service: {
      type: Object,
      required: true,
      validator: (obj) => {
        return obj.type === 'fotografia' && obj.fotografia
      }
    }
  },
  methods: {
    viewDetails () {
      this.$emit('view-details', this.service)
    },
    contactProvider () {
      this.$emit('contact-provider', this.service)
    },
    formatFotografiaType (type) {
      const labels = {
        'fotografia': 'Fotografía',
        'video': 'Vídeo',
        'servicio_especial': 'Servicio Especial'
      }
      return labels[type] || type
    },
    formatServicioEspecial (type) {
      const labels = {
        'impresion_instantanea': 'Impresión Instantánea',
        'fotomaton': 'Fotomatón',
        'cabina': 'Cabina',
        'espejo_magico': 'Espejo Mágico',
        'video_360': 'Vídeo 360°',
        'gift_box': 'Gift Box',
        'virtual': 'Virtual',
        'camara_oculta': 'Cámara Oculta'
      }
      return labels[type] || type
    }
  }
}
</script>

<style scoped>
.fotografia-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.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.2rem;
}
</style>
