import { useLocation } from "react-router";
import { Link } from "react-router";
import { useSession } from "./Session";

export default function Footer() {
  const location = useLocation();
  const { user, teams } = useSession();
  return (
    <footer className={location.pathname === "/network" ? "fixed-footer" : ""}>
      {(user?.scopes.split(" ").includes("analysis") ||
        teams?.activeTeam === 42) && (
        <div className="navbar">
          <Link to="/">
            <span>Form</span>
          </Link>
          <span>|</span>
          <Link to="/network">
            <span>Sociogram</span>
          </Link>
          <span>|</span>
          <Link to="/mvp">
            <span>MVP</span>
          </Link>
          <span>|</span>
          <Link to="/team">
            <span>Team</span>
          </Link>
        </div>
      )}
      <p className="grey extra-margin">
        something not working?
        <br />
        message <a href="https://t.me/x0124816">me</a>.
        <br />
        or fix it here:{" "}
        <a href="https://git.0124816.xyz/julius/cutt" key="gitea">
          <img src="gitea.svg" alt="gitea" height="16" />
        </a>
      </p>
    </footer>
  );
}