import React from 'react';
import styles from './ConnectionsErrorDisplay.module.css';
import { ConnectionsErrorDisplayProps } from './connectionsInterfaces';
import { useLanguage } from '../../contexts/LanguageContext';

export function ConnectionsErrorDisplay({
  error,
  connectError,
  disconnectError
}: ConnectionsErrorDisplayProps) {
  const { t } = useLanguage();
  
  // Don't render anything if no errors
  if (!error && !connectError && !disconnectError) {
    return null;
  }

  return (
    <div className={styles.errorContainer}>
      {error && (
        <div className={styles.errorMessage}>
          <strong>{t('connections.error', 'Error')}:</strong> {error}
        </div>
      )}

      {connectError && (
        <div className={styles.errorMessage}>
          <strong>{t('connections.connection_error', 'Connection Error')}:</strong> {connectError}
        </div>
      )}

      {disconnectError && (
        <div className={styles.errorMessage}>
          <strong>{t('connections.disconnect_error', 'Disconnect Error')}:</strong> {disconnectError}
        </div>
      )}
    </div>
  );
}

export default ConnectionsErrorDisplay;