<!-- app/components/ui/SecureConnectionIndicator.vue -->

<script setup lang="ts">
import { ShieldCheck, ShieldAlert, ShieldOff } from 'lucide-vue-next'

// Check if connection is secure (HTTPS)
const isSecureConnection = ref(false)

// Runs only on the client side
onMounted(() => {
	isSecureConnection.value = window.location.protocol === 'https:'
})
</script>

<template>
	<ClientOnly>
		<p v-if="!isSecureConnection" class="flex items-center justify-center gap-2 text-sm text-white/70">
			<ShieldAlert :size="18" class="flex-shrink-0 text-error" />
			<ShieldOff :size="18" class="flex-shrink-0 text-error" />
			<span class="text-error"><span class="font-bold">Warnung:</span> Diese Verbindung ist nicht verschlüsselt. Deine
				Eingaben könnten von anderen gelesen
				werden.</span>
		</p>
		<p v-else class="flex items-center justify-center gap-2 text-sm text-white/70">
			<ShieldCheck :size="18" class="flex-shrink-0 text-success" />
			<span class="text-success">Deine Verbindung ist sicher und verschlüsselt</span>
		</p>
	</ClientOnly>
</template>
