<script setup>
import { computed } from 'vue'
import { useLive } from '@/composables/useLive'
import { SignalIcon, SignalSlashIcon } from '@heroicons/vue/24/outline'

const { isOnline, lastUpdate } = useLive({ interval: 30_000 })

const tooltip = computed(() => {
    if (!isOnline.value) return 'Sunucu ile bağlantı kayıp'
    if (!lastUpdate.value) return 'Bağlanıyor...'
    const seconds = Math.floor((Date.now() - lastUpdate.value.getTime()) / 1000)
    return `Canlı · Son senkron: ${seconds}s önce`
})
</script>

<template>
    <div :title="tooltip" class="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg text-xs">
        <span v-if="isOnline" class="relative flex h-2 w-2">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
        </span>
        <span v-else class="inline-flex h-2 w-2 rounded-full bg-red-500"></span>
        <span class="hidden md:inline text-slate-500 dark:text-slate-400 font-medium">
            {{ isOnline ? 'Canlı' : 'Çevrimdışı' }}
        </span>
    </div>
</template>
