import React from 'react';

type BadgeVariant =
  | 'success'
  | 'warning'
  | 'error'
  | 'info'
  | 'default'
  | 'online'
  | 'offline';

interface StatusBadgeProps {
  variant?: BadgeVariant;
  children: React.ReactNode;
  className?: string;
  dot?: boolean;
}

const variantStyles: Record<BadgeVariant, { bg: string; text: string; dot: string }> = {
  success: { bg: 'bg-green-100', text: 'text-green-700', dot: 'bg-green-500' },
  warning: { bg: 'bg-yellow-100', text: 'text-yellow-700', dot: 'bg-yellow-500' },
  error: { bg: 'bg-red-100', text: 'text-red-700', dot: 'bg-red-500' },
  info: { bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500' },
  default: { bg: 'bg-gray-100', text: 'text-gray-700', dot: 'bg-gray-500' },
  online: { bg: 'bg-green-100', text: 'text-green-700', dot: 'bg-green-500' },
  offline: { bg: 'bg-gray-100', text: 'text-gray-500', dot: 'bg-gray-400' },
};

export function StatusBadge({
  variant = 'default',
  children,
  className = '',
  dot = false,
}: StatusBadgeProps) {
  const styles = variantStyles[variant];

  return (
    <span
      className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${styles.bg} ${styles.text} ${className}`}
    >
      {dot && <span className={`w-1.5 h-1.5 rounded-full ${styles.dot}`} />}
      {children}
    </span>
  );
}

interface SensorStatusBadgeProps {
  status: 'online' | 'offline' | 'warning' | 'error';
  className?: string;
}

export function SensorStatusBadge({ status, className = '' }: SensorStatusBadgeProps) {
  const labels: Record<string, string> = {
    online: 'Online',
    offline: 'Offline',
    warning: 'Warning',
    error: 'Error',
  };

  return (
    <StatusBadge variant={status} dot className={className}>
      {labels[status] || status}
    </StatusBadge>
  );
}