<template>
    <span v-if="isLoading" class="text-gray-400 dark:text-gray-600 text-xs">…</span>
    <span v-else-if="sources.length" class="text-gray-700 dark:text-gray-300 truncate max-w-xs block">{{ sources[0].name }}</span>
    <span v-else class="text-gray-400 dark:text-gray-600">—</span>
</template>

<script setup>
import { computed, toRef } from 'vue';
import { useMangaPreferredSources } from '../composables/useMangaPreferredSources';

const props = defineProps({
    mangaId: {
        type: String,
        required: true
    }
});

const mangaIdRef = toRef(props, 'mangaId');
const { sources, isLoading } = useMangaPreferredSources(mangaIdRef);
</script>
