'use client';

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

export type ServerStatus = 'online' | 'offline' | 'degraded' | 'maintenance';

const STATUS_CONFIG: Record<ServerStatus, { dot: string; label: string; text: string }> = {
  online: {
    dot: 'bg-green-500',
    label: 'Online',
    text: 'text-green-700',
  },
  offline: {
    dot: 'bg-red-500',
    label: 'Offline',
    text: 'text-red-700',
  },
  degraded: {
    dot: 'bg-yellow-500',
    label: 'Degraded',
    text: 'text-yellow-700',
  },
  maintenance: {
    dot: 'bg-blue-500',
    label: 'Maintenance',
    text: 'text-blue-700',
  },
};

interface ServerStatusIndicatorProps {
  status: ServerStatus;
  className?: string;
}

export function ServerStatusIndicator({ status, className }: ServerStatusIndicatorProps) {
  const config = STATUS_CONFIG[status];

  return (
    <span className={cn('inline-flex items-center gap-1.5', className)}>
      <span
        className={cn(
          'h-2 w-2 rounded-full',
          config.dot,
          status === 'online' && 'animate-pulse',
        )}
      />
      <span className={cn('text-sm font-medium', config.text)}>
        {config.label}
      </span>
    </span>
  );
}
