'use client';

import { useContext } from 'react';
import OfflineContext from '@/context/OfflineContext';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faWifi, faCircle } from '@fortawesome/free-solid-svg-icons';

export default function OfflineToggle() {
    const { offlineMode, toggleOfflineMode } = useContext(OfflineContext);

    if (!window.electron || !offlineMode.isDatabaseInitialized) {
        return null;
    }

    const handleToggle = () => {
        toggleOfflineMode();
    };

    return (
        <button
            onClick={handleToggle}
            className={`
                flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all
                ${offlineMode.isOffline
                    ? 'bg-orange-500/20 border-orange-500/40 hover:bg-orange-500/30'
                    : 'bg-green-500/20 border-green-500/40 hover:bg-green-500/30'
                }
            `}
            title={offlineMode.isOffline ? 'Passer en mode en ligne' : 'Passer en mode hors ligne'}
        >
            <FontAwesomeIcon
                icon={offlineMode.isOffline ? faCircle : faWifi}
                className={`w-3 h-3 ${offlineMode.isOffline ? 'text-orange-300' : 'text-green-300'}`}
            />
            <span className={`text-xs font-medium ${offlineMode.isOffline ? 'text-orange-200' : 'text-green-200'}`}>
                {offlineMode.isOffline ? 'Hors ligne' : 'En ligne'}
            </span>
        </button>
    );
}