<template>
  <div class="location-display">
    <div v-if="location" class="location-info">
      <div class="d-flex align-items-center">
        <div class="location-icon me-3">
          <i class="fas fa-map-marker-alt text-primary"></i>
        </div>
        <div class="location-details flex-grow-1">
          <h6 class="location-name mb-1">{{ location.name }}</h6>
          <p v-if="location.address" class="location-address mb-0 text-muted">
            {{ location.address }}
          </p>
          <p v-if="location.phone" class="location-phone mb-0 text-muted small">
            <i class="fas fa-phone me-1"></i>
            {{ location.phone }}
          </p>
        </div>
        <div v-if="showActions && editable" class="location-actions">
          <button
            type="button"
            class="btn btn-sm btn-outline-secondary"
            @click="$emit('edit', location)"
            :disabled="disabled"
          >
            <i class="fas fa-edit"></i>
          </button>
          <button
            type="button"
            class="btn btn-sm btn-outline-danger ms-1"
            @click="$emit('remove')"
            :disabled="disabled"
          >
            <i class="fas fa-trash"></i>
          </button>
        </div>
      </div>

      <!-- Additional Info -->
      <div v-if="location.description" class="location-description mt-2">
        <small class="text-muted">{{ location.description }}</small>
      </div>

      <!-- New Location Badge -->
      <div v-if="location.isNew" class="new-location-badge mt-2">
        <span class="badge bg-warning">
          <i class="fas fa-plus me-1"></i>
          Nouveau lieu
        </span>
      </div>
    </div>

    <!-- Empty State -->
    <div v-else class="location-empty text-center py-3">
      <i class="fas fa-map-marker-alt text-muted fa-2x mb-2"></i>
      <p class="text-muted mb-0">{{ emptyMessage }}</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  location: {
    type: Object,
    default: () => null,
  },
  editable: {
    type: Boolean,
    default: true,
  },
  showActions: {
    type: Boolean,
    default: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  emptyMessage: {
    type: String,
    default: "Aucun lieu sélectionné",
  },
});

const emit = defineEmits(["edit", "remove"]);
</script>

<style scoped>
.location-display {
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  padding: 1rem;
  background-color: #f8f9fa;
}

.location-info {
  min-height: 60px;
}

.location-icon {
  font-size: 1.2rem;
}

.location-name {
  font-weight: 600;
  color: #495057;
}

.location-address,
.location-phone {
  font-size: 0.875rem;
}

.location-actions .btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location-empty {
  color: #6c757d;
}

.location-empty i {
  opacity: 0.5;
}

.new-location-badge .badge {
  font-size: 0.75rem;
}
</style>
