<script lang="ts">
  import { relativeTime } from '$lib/utils'
  import type { Entity } from '$lib/api'

  let { row, value }: { row: Entity; value: unknown } = $props()

  const dot: Record<string, string> = {
    healthy: 'bg-success',
    degraded: 'bg-warning',
    down: 'bg-destructive',
    stale: 'bg-warning/50',
    unknown: 'bg-muted-foreground/40'
  }

  const health = $derived(row.health)
  const lastCheck = $derived(row.last_check_at)

  const title = $derived.by(() => {
    if (!row.health) return 'not monitored'
    if (row.health === 'stale') return `stale — last checked ${relativeTime(row.last_check_at)}`
    return `${row.health} — checked ${relativeTime(row.last_check_at)}`
  })
</script>

{#if health}
  <span class="flex items-center gap-1.5 text-xs" {title}>
    <span class="size-2 shrink-0 rounded-full {dot[row.health ?? ''] ?? ''}"></span>
    <span class="text-muted-foreground">{relativeTime(lastCheck)}</span>
  </span>
{:else}
  <span class="text-xs text-muted-foreground">—</span>
{/if}
