<template>
  <div class="manga-option">
    <div class="flex items-center space-x-3">
      <div v-if="manga.coverUrl" class="flex-shrink-0">
        <img
          :src="manga.coverUrl"
          :alt="manga.title"
          class="w-12 h-16 object-cover rounded"
        />
      </div>
      <div v-else class="flex-shrink-0 w-12 h-16 bg-gray-200 rounded flex items-center justify-center">
        <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
      </div>

      <div class="flex-1 min-w-0">
        <h4 class="text-sm font-medium text-gray-900 truncate">
          {{ manga.title }}
        </h4>
        <div class="text-xs text-gray-500 space-y-1">
          <p v-if="manga.author" class="truncate">
            {{ manga.author }}
          </p>
          <p v-if="manga.publicationYear" class="truncate">
            {{ manga.publicationYear }}
          </p>
          <div v-if="manga.genres && manga.genres.length > 0" class="flex flex-wrap gap-1">
            <span
              v-for="genre in manga.genres.slice(0, 3)"
              :key="genre"
              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800"
            >
              {{ genre }}
            </span>
            <span v-if="manga.genres.length > 3" class="text-xs text-gray-400">
              +{{ manga.genres.length - 3 }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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