<template>
    <!--
        Placeholder generique « En cours de dev » pour les ecrans / onglets non
        encore implementes. Composant PARTAGE (shared/components) : auto-importe
        sans prefixe (`<ComingSoonPlaceholder>`) et reutilisable depuis n'importe
        quel module. Affiche un gif (asset local par defaut) + un message i18n.
    -->
    <div class="flex min-h-[240px] flex-col items-center justify-center gap-4 rounded-md bg-white py-10">
        <img
            v-if="!imageFailed"
            :src="src"
            :alt="resolvedTitle"
            class="max-h-[220px] w-auto rounded-md"
            @error="imageFailed = true"
        >
        <!-- Repli si le gif ne charge pas (offline, CSP, asset absent) :
             illustration emoji, le message reste affiche. -->
        <div v-else class="text-5xl" aria-hidden="true">🚧 👨‍💻 🚧</div>

        <div class="text-center">
            <p class="text-xl font-bold text-black">{{ resolvedTitle }}</p>
            <p class="mt-1 text-black/60">{{ resolvedSubtitle }}</p>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        /** Source de l'image/gif affichee. Defaut : asset local `/coming-soon.gif`. */
        src?: string
        /** Titre. Defaut : i18n `common.comingSoon.title`. */
        title?: string
        /** Sous-titre. Defaut : i18n `common.comingSoon.subtitle`. */
        subtitle?: string
    }>(),
    {
        src: '/coming-soon.gif',
        title: '',
        subtitle: '',
    },
)

const { t } = useI18n()
const imageFailed = ref(false)

// Les props priment sur les libelles i18n par defaut (permet a un module
// d'override le texte sans toucher au composant).
const resolvedTitle = computed(() => props.title || t('common.comingSoon.title'))
const resolvedSubtitle = computed(() => props.subtitle || t('common.comingSoon.subtitle'))
</script>
