import { useEffect, useState } from "react";
import { getHealth } from "../../api";

export function AppShellFooter(): JSX.Element {
  const [backendVersion, setBackendVersion] = useState<string | null>(null);

  useEffect(() => {
    const ac = new AbortController();
    void getHealth({ signal: ac.signal })
      .then((h) => {
        if (ac.signal.aborted) {
          return;
        }
        setBackendVersion(h.version);
      })
      .catch(() => {
        if (ac.signal.aborted) {
          return;
        }
        setBackendVersion("недоступна");
      });
    return () => ac.abort();
  }, []);

  const backendLabel = backendVersion === null ? "…" : backendVersion;

  return (
    <footer className="app-shell__footer">
      <p className="app-shell__footer-versions">
        Версия клиента: {__FRONTEND_VERSION__}
        <span className="app-shell__footer-sep" aria-hidden="true">
          {" · "}
        </span>
        Версия сервера: {backendLabel}
      </p>
    </footer>
  );
}