<script setup lang="ts">
import type { WebNovel } from '~/types'

interface Props {
  novels?: WebNovel[]
  loading?: boolean
}

withDefaults(defineProps<Props>(), {
  loading: false
})
</script>

<template>
  <div>
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Featured Novels</h2>
      <NuxtLink to="/novels" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">
        View All
      </NuxtLink>
    </div>

    <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <USkeleton v-for="i in 4" :key="i" class="h-64 rounded-lg" />
    </div>

    <div v-else-if="novels && novels.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <NovelCard
        v-for="novel in novels.slice(0, 4)"
        :key="novel.id"
        :novel="novel"
      />
    </div>

    <div v-else class="py-12 text-center text-gray-500 dark:text-gray-400">
      <p>No novels available</p>
    </div>
  </div>
</template>
