// Status Indicator Component
import { clsx } from 'clsx';
import './StatusIndicator.css';

interface StatusIndicatorProps {
  status: 'healthy' | 'degraded' | 'down' | 'connected' | 'disconnected';
  size?: 'small' | 'medium' | 'large';
  showLabel?: boolean;
  pulse?: boolean;
  className?: string;
}

export default function StatusIndicator({
  status,
  size = 'medium',
  showLabel = false,
  pulse = false,
  className,
}: StatusIndicatorProps) {
  const statusConfig = {
    healthy: { color: 'var(--color-status-healthy)', label: 'Healthy' },
    degraded: { color: 'var(--color-status-degraded)', label: 'Degraded' },
    down: { color: 'var(--color-status-down)', label: 'Down' },
    connected: { color: 'var(--color-status-healthy)', label: 'Connected' },
    disconnected: { color: 'var(--color-status-down)', label: 'Disconnected' },
  };

  const config = statusConfig[status];

  return (
    <div className={clsx('status-indicator', `status-indicator--${size}`, className)}>
      <span
        className={clsx('status-indicator__dot', {
          'status-indicator__dot--pulse': pulse && status === 'healthy',
        })}
        style={{ backgroundColor: config.color }}
        title={config.label}
      />
      {showLabel && <span className="status-indicator__label">{config.label}</span>}
    </div>
  );
}

