<script setup lang="ts">
import SearchBar from "~/components/SearchBar.vue";
import { ref } from "vue";

const isInitialLoading = ref(true);
</script>

<template>
  <section>
    <h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1>
    
    <!-- Barre de recherche -->
    <search-bar placeholder="Rechercher un film..."/>
    
    <!-- Skeleton loader pendant le chargement initial -->
    <div 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 8" :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>
    </div>
  </section>
</template>

<style scoped>

</style>