'use client';

import React, { useState, useEffect, useRef } from 'react';
import { Toast } from 'primereact/toast';

interface ConnectionStatusProps {
    showToasts?: boolean;
    showIndicator?: boolean;
    className?: string;
}

export const ConnectionStatusSimple: React.FC<ConnectionStatusProps> = ({ 
    showToasts = true, 
    showIndicator = true,
    className = ''
}) => {
    const [isOnline, setIsOnline] = useState(true);
    const toast = useRef<Toast>(null);

    useEffect(() => {
        console.log('ConnectionStatusSimple mounted - no API calls for now');
        
        // Pas d'API call pour le moment, juste pour tester le composant
        setIsOnline(true);
    }, []);

    if (!showIndicator && showToasts) {
        return <Toast ref={toast} />;
    }

    if (!showIndicator) {
        return null;
    }

    return (
        <div className={`flex align-items-center gap-2 ${className}`}>
            <Toast ref={toast} />
            <div className="flex align-items-center gap-2">
                <i 
                    className={`pi ${isOnline ? 'pi-circle-fill text-green-500' : 'pi-circle-fill text-red-500'}`}
                    style={{ fontSize: '12px' }}
                />
                <span 
                    className={`text-sm font-medium ${isOnline ? 'text-green-700' : 'text-red-700'}`}
                >
                    {isOnline ? 'Serveur OK' : 'Serveur KO'}
                </span>
            </div>
        </div>
    );
};

export default ConnectionStatusSimple;