<script lang="ts" setup>
// #region --Props--.
defineProps({
  isInitialLoading: {
    type: Boolean,
    required: true,
    nullable: false,
  },
  skeletonNumber: {
    type: Number,
    required: false,
    nullable: false,
    default: 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>