import { useOnlineStatus } from '@/hooks/useOnlineStatus';

/**
 * Composant pour afficher un indicateur de mode hors ligne
 */
export function OfflineIndicator() {
  const isOnline = useOnlineStatus();

  if (isOnline) return null;

  return (
    <div className="fixed top-0 left-0 right-0 bg-yellow-500 text-white px-4 py-2 text-center text-sm z-50 flex items-center justify-center gap-2">
      <svg
        className="w-5 h-5"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M18.364 5.636a9 9 0 010 12.728m0 0l-5.657-5.657m5.657 5.657L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m4.243 2.829L10.343 10.343m4.243 2.829L6.343 18.172"
        />
      </svg>
      <span>
        Mode hors ligne - Vos actions seront synchronisées à la reconnexion
      </span>
    </div>
  );
}