import React from 'react';
import { Wifi, WifiOff, RotateCcw } from 'lucide-react';

const ConnectionStatus = ({ status, onReconnect }) => {
  const getStatusInfo = () => {
    switch (status) {
      case 'connected':
        return {
          icon: <Wifi className="w-4 h-4" />,
          text: 'Connecté',
          className: 'text-green-600 bg-green-50 border-green-200',
        };
      case 'disconnected':
        return {
          icon: <WifiOff className="w-4 h-4" />,
          text: 'Déconnecté',
          className: 'text-red-600 bg-red-50 border-red-200',
        };
      case 'reconnecting':
        return {
          icon: <RotateCcw className="w-4 h-4 animate-spin" />,
          text: 'Reconnexion...',
          className: 'text-yellow-600 bg-yellow-50 border-yellow-200',
        };
      case 'error':
        return {
          icon: <WifiOff className="w-4 h-4" />,
          text: 'Erreur de connexion',
          className: 'text-red-600 bg-red-50 border-red-200',
        };
      case 'failed':
        return {
          icon: <WifiOff className="w-4 h-4" />,
          text: 'Connexion échouée',
          className: 'text-red-600 bg-red-50 border-red-200',
        };
      default:
        return {
          icon: <WifiOff className="w-4 h-4" />,
          text: 'Inconnu',
          className: 'text-gray-600 bg-gray-50 border-gray-200',
        };
    }
  };

  if (status === 'connected') {
    return (
      <div className="flex items-center justify-between px-3 py-2 border rounded-lg text-green-600 bg-green-50 border-green-200">
        <div className="flex items-center space-x-2">
          <Wifi className="w-4 h-4" />
          <span className="text-sm font-medium">Connecté</span>
        </div>
      </div>
    );
  }

  const { icon, text, className } = getStatusInfo();

  return (
    <div
      className={`flex items-center justify-between px-3 py-2 border rounded-lg ${className}`}
    >
      <div className="flex items-center space-x-2">
        {icon}
        <span className="text-sm font-medium">{text}</span>
      </div>
      {(status === 'failed' || status === 'error') && onReconnect && (
        <button
          onClick={onReconnect}
          className="text-sm underline hover:no-underline"
        >
          Réessayer
        </button>
      )}
    </div>
  );
};

export default ConnectionStatus;