<script lang="ts" setup>
// #region --Props--.
withDefaults(defineProps<{
  isInitialLoading: boolean;
  skeletonNumber?: number;
}>(), {
  skeletonNumber: 12,
});
// #endregion
</script>

<template>
  <!-- Skeleton loader pendant le chargement initial -->
  <section
    v-if="isInitialLoading"
    class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
  >
    <div
      v-for="i in skeletonNumber"
      :key="i"
      class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse"
    >
      <div class="h-80 bg-gray-700" />
      <div class="p-4">
        <div class="h-6 bg-gray-700 rounded mb-3" />
        <div class="h-4 bg-gray-700 rounded w-2/3" />
      </div>
    </div>
  </section>
</template>

<style scoped></style>