<!-- 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(): 'default' | 'destructive' | 'outline' | 'secondary' {
  if (!props.isConnected) return 'destructive'
  if (props.isConnecting) return 'secondary'
  return 'outline'
}

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 border-0 bg-transparent sm:border sm:bg-[inherit]"
    >
      <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="hidden text-[10px] sm:inline">{{ getStatusText() }}</span>
    </Badge>
    <p v-if="error" class="hidden text-xs text-destructive sm:block">
      {{ error.message }}
    </p>
  </div>
</template> 