<template>
    <div class="shadow-lg text-white">
        <div class="relative h-96 bg-cover bg-center" :style="{ backgroundImage: `url('${manga.imageUrl}')` }">
            <div class="absolute inset-0 bg-black opacity-50"></div>
            <div class="absolute inset-0 flex flex-row justify-center p-4">
                <!-- Image de couverture -->
                <div class="hidden mr-12 xl:block 2xl:block">
                    <img :src="manga.thumbnailUrl" :alt="manga.title" class="max-w-72 max-h-72 ml-4" />
                </div>

                <!-- Informations du manga -->
                <div class="flex flex-col">
                    <div class="flex items-center mb-4">
                        <BookmarkIcon class="h-8 w-8 text-white" />
                        <h1 class="text-3xl font-bold ml-4">{{ manga.title }}</h1>
                    </div>

                    <div class="flex items-center mb-4">
                        <span class="mr-4">{{ manga.year }}</span>
                        <span>Chapitres: {{ manga.totalChapters }}</span>
                    </div>

                    <div class="flex items-center mb-4">
                        <FolderIcon class="h-6 w-6 text-gray-400 mr-2" />
                        <span class="truncate">/media/mangas/{{ manga.title }} ({{ manga.year }})</span>
                        <span class="ml-auto bg-green-600 py-1 px-2 rounded">{{ manga.status || 'Terminé' }}</span>
                    </div>

                    <div class="flex items-center mb-4">
                        <template v-if="manga.tags?.length">
                            <template v-for="(tag, index) in manga.tags.slice(0, 5)" :key="index">
                                <span class="bg-gray-700 py-1 px-2 rounded-sm mr-2">{{ tag }}</span>
                            </template>
                            <span v-if="manga.tags.length > 5" class="bg-gray-700 py-1 px-2 rounded-sm mr-2">...</span>
                        </template>
                    </div>

                    <div class="mb-4">
                        <div class="flex items-center mb-2">
                            <HeartIcon class="h-6 w-6 text-red-500 mr-2" />
                            <span>{{ manga.rating }}</span>
                        </div>
                        <p class="line-clamp-5">{{ manga.description }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { BookmarkIcon, FolderIcon, HeartIcon } from '@heroicons/vue/24/outline';

    defineProps({
        manga: {
            type: Object,
            required: true
        }
    });
</script>

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