import React from "react";
import { observer } from "mobx-react-lite";
import { useGeolocationStore } from "../stores/hooks/useGeolocationStore";
import "./ErrorOverlay.css";

const ErrorOverlay = observer(() => {
  const { error, isLoading } = useGeolocationStore();

  // Показываем GIF только если есть ошибка и загрузка завершена
  if (!error || isLoading) {
    return null;
  }

  return (
    <div className="error-overlay">
      <div className="error-content">
        <img src="/loader.gif" alt="Error" className="error-gif" />
        <p className="error-message">{error}</p>
      </div>
    </div>
  );
});

export default ErrorOverlay;
