<!-- A component that shows NOSTR connection status -->
<script setup lang="ts">
import { Badge } from '@/components/ui/badge'

const props = defineProps<{
  isConnected: boolean
  isConnecting: boolean
  error?: Error | null
}>()

function getStatusVariant() {
  if (props.isConnecting) return 'warning'
  return props.isConnected ? 'success' : 'destructive'
}

function getStatusText() {
  if (props.isConnecting) return 'Connecting'
  return props.isConnected ? 'Online' : 'Offline'
}

function getStatusColor() {
  if (props.isConnecting) return 'bg-yellow-400'
  return props.isConnected ? 'bg-green-400' : 'bg-red-400'
}

function getStatusColorSolid() {
  if (props.isConnecting) return 'bg-yellow-500'
  return props.isConnected ? 'bg-green-500' : 'bg-red-500'
}
</script>

<template>
  <div class="flex items-center gap-2">
    <Badge :variant="getStatusVariant()" class="flex items-center gap-1">
      <span class="relative flex h-2 w-2">
        <span 
          class="absolute inline-flex h-full w-full rounded-full opacity-75"
          :class="[
            getStatusColor(),
            { 'animate-ping': !props.isConnecting },
            { 'animate-pulse': props.isConnecting }
          ]"
        />
        <span 
          class="relative inline-flex h-2 w-2 rounded-full"
          :class="getStatusColorSolid()"
        />
      </span>
      <span class="text-[10px]">{{ getStatusText() }}</span>
    </Badge>
    <p v-if="error" class="text-xs text-destructive">
      {{ error.message }}
    </p>
  </div>
</template> 