<template>
    <div class="space-y-4">
        <div
            v-for="manga in mangas"
            :key="manga.id"
            class="flex bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg p-4 space-x-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
            @click="$emit('manga-click', manga)">
            <!-- Cover Image -->
            <div class="flex-shrink-0">
                <img :src="manga.imageUrl || '/placeholder-cover.png'" alt="" class="h-48 w-32 object-cover rounded" />
                <!-- TODO: Add placeholder image -->
            </div>

            <!-- Manga Info -->
            <div class="flex-1 min-w-0">
                <h3 class="text-lg leading-7 font-medium text-gray-900 dark:text-gray-100 truncate">{{
                    manga.title
                }}</h3>
                <p v-if="manga.publicationYear" class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{
                    manga.publicationYear
                }}</p>
                <p v-if="manga.description" class="text-sm text-gray-700 dark:text-gray-300 mt-2">
                    {{ truncateDescription(manga.description) }}
                </p>
                <p v-if="manga.createdAt" class="text-sm text-gray-500 dark:text-gray-400 mt-2">
                    Added: {{ formatDate(manga.createdAt) }}
                </p>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { defineEmits, defineProps } from 'vue';

    const emit = defineEmits(['manga-click']);

    const props = defineProps({
        mangas: {
            type: Array,
            required: true
        }
    });

    const formatDate = dateString => {
        if (!dateString) return '';
        const options = { year: 'numeric', month: 'long', day: 'numeric' };
        try {
            return new Date(dateString).toLocaleDateString(undefined, options);
        } catch (e) {
            console.error('Error formatting date:', e);
            return dateString;
        }
    };

    const truncateDescription = description => {
        if (!description) return '';
        return description.length > 500 ? description.slice(0, 500) + '...' : description;
    };
</script>

<style scoped>
    /* Pour s'assurer que line-clamp fonctionne */
    @supports (-webkit-line-clamp: 3) {
        .line-clamp-3 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    }

    .description-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        max-width: 500px;
    }
</style>
