<template>
  <div class="intervention-list">
    <div class="row">
      <div
        v-for="(intervention, index) in interventions"
        :key="index"
        class="col-lg-4 col-md-6 col-12 mb-4"
      >
        <card-interventions
          :id="intervention.id"
          :title="intervention.title"
          :status="intervention.status"
          :date="intervention.date"
          :defunt-name="intervention.defuntName"
          :lieux="intervention.lieux"
          :duree="intervention.duree"
          :description="intervention.description"
          :action="intervention.action"
          :members="intervention.members"
        />
      </div>
    </div>

    <!-- Message si aucune intervention -->
    <div v-if="interventions.length === 0" class="text-center py-5">
      <p class="text-muted">Aucune intervention planifiée</p>
    </div>
  </div>
</template>

<script setup>
import CardInterventions from "@/components/atoms/Interventions/CardInterventions.vue";
import { defineProps, computed } from "vue";
const props = defineProps({
  interventionData: {
    type: Array,
    default: () => [],
  },
});

// Use provided data if available, otherwise fall back to default
const interventions = computed(() => {
  return props.interventionData.length > 0
    ? props.interventionData
    : [
        {
          id: 1, // Add required id for navigation
          title: "Cérémonie religieuse",
          status: {
            label: "Confirmé",
            color: "success",
            variant: "fill",
            size: "md",
          },
          date: "15 Décembre 2024 - 14:00",
          defuntName: "Jean Dupont",
          lieux: "Église Saint-Pierre, Paris",
          duree: "1h30",
          description:
            "Cérémonie religieuse traditionnelle suivie d'une bénédiction.",
          action: {
            label: "Voir détails",
            color: "primary",
          },
          members: [
            {
              image: "/images/avatar1.jpg",
              name: "Marie Curie",
            },
            {
              image: "/images/avatar2.jpg",
              name: "Pierre Durand",
            },
          ],
        },
      ];
});
</script>

<style scoped>
.intervention-list {
  padding: 20px 0;
}
</style>
