<template>
    <div
        class="border p-2.5 cursor-pointer transition-all duration-150"
        :class="isSelected
            ? 'border-green-500 bg-green-50 dark:bg-green-900/20'
            : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800'"
        @click="$emit('select-match', match)"
    >
        <div class="flex gap-2.5">
            <!-- Couverture -->
            <img
                v-if="match.thumbnailUrl"
                :src="match.thumbnailUrl"
                :alt="match.title"
                class="w-12 h-16 object-cover shrink-0"
            />
            <div
                v-else
                class="w-12 h-16 bg-gray-100 dark:bg-gray-700 shrink-0 flex items-center justify-center"
            >
                <PhotoIcon class="w-6 h-6 text-gray-400" />
            </div>

            <!-- Infos -->
            <div class="flex-1 min-w-0 flex flex-col justify-between py-0.5">
                <p class="text-xs font-medium text-gray-900 dark:text-gray-100 line-clamp-3 leading-snug" :title="match.title">
                    {{ match.title }}
                </p>
                <div class="flex items-center justify-between mt-1">
                    <span class="text-xs text-gray-400 dark:text-gray-500">{{ match.matchScore }}%</span>
                    <CheckCircleIcon v-if="isSelected" class="w-4 h-4 text-green-500 shrink-0" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { CheckCircleIcon, PhotoIcon } from '@heroicons/vue/24/outline';

const props = defineProps({
    match: { type: Object, required: true },
    isSelected: { type: Boolean, default: false },
});

const emit = defineEmits(['select-match']);
</script>
