import React from 'react';

const statusConfig = {
  online: {
    label: 'En ligne',
    className: 'status-online',
    dotColor: 'bg-emerald-400',
  },
  offline: {
    label: 'Hors ligne',
    className: 'status-offline',
    dotColor: 'bg-gray-400',
  },
  error: {
    label: 'Erreur',
    className: 'status-error',
    dotColor: 'bg-red-400',
  },
  unknown: {
    label: 'Inconnu',
    className: 'status-warning',
    dotColor: 'bg-amber-400',
  },
  running: {
    label: 'En cours',
    className: 'status-warning',
    dotColor: 'bg-amber-400',
  },
  success: {
    label: 'Succès',
    className: 'status-online',
    dotColor: 'bg-emerald-400',
  },
  failed: {
    label: 'Échoué',
    className: 'status-error',
    dotColor: 'bg-red-400',
  },
};

export default function StatusBadge({ status, size = 'sm' }) {
  const config = statusConfig[status] || statusConfig.unknown;

  return (
    <span className={config.className}>
      <span
        className={`w-2 h-2 rounded-full ${config.dotColor} mr-1.5 ${
          status === 'online' || status === 'running' ? 'animate-pulse-dot' : ''
        }`}
      />
      {config.label}
    </span>
  );
}