// src/components/ui/StatusDot.tsx
// Input: status, label?, size?, pulse?
// Output: colored dot with optional pulse animation and label
// Rationale: universal status indicator used in topbar, tables, panels

import { cn } from '@/lib/utils'

export type DotStatus = 'online' | 'offline' | 'warning' | 'critical' | 'info' | 'calibrating'

export interface StatusDotProps {
  status: DotStatus
  label?: string
  size?: 'sm' | 'md'
  className?: string
}

const colorClasses: Record<DotStatus, string> = {
  online:      'bg-status-success',
  offline:     'bg-status-offline',
  warning:     'bg-status-warning',
  critical:    'bg-status-danger',
  info:        'bg-status-info',
  calibrating: 'bg-status-info',
}

const pulsingStatuses: DotStatus[] = ['online', 'critical']

const sizeClasses = {
  sm: 'w-1.5 h-1.5',
  md: 'w-2 h-2',
}

export function StatusDot({ status, label, size = 'md', className }: StatusDotProps) {
  const isPulsing = pulsingStatuses.includes(status)
  const color = colorClasses[status]

  return (
    <span className={cn('inline-flex items-center gap-1.5', className)}>
      <span className="relative flex-shrink-0 flex items-center justify-center">
        {isPulsing && (
          <span
            className={cn(
              'absolute rounded-full opacity-60',
              color,
              size === 'sm' ? 'w-3 h-3' : 'w-3.5 h-3.5',
              'pulse-accent'
            )}
          />
        )}
        <span
          className={cn(
            'relative rounded-full flex-shrink-0',
            color,
            sizeClasses[size]
          )}
        />
      </span>
      {label && (
        <span className="text-caption text-text-secondary">{label}</span>
      )}
    </span>
  )
}