const REPO_URL = "https://github.com/xpltdco/chrysopedia";

import { Link } from "react-router-dom";

export default function AppFooter() {
  const commitUrl =
    __GIT_COMMIT__ !== "dev"
      ? `${REPO_URL}/commit/${__GIT_COMMIT__}`
      : undefined;

  return (
    <footer className="app-footer">
      <span className="app-footer__version">
        v{__APP_VERSION__}
      </span>
      <span className="app-footer__sep">·</span>
      <span className="app-footer__date">
        Built {__BUILD_DATE__.slice(0, 10)}
      </span>
      {commitUrl && (
        <>
          <span className="app-footer__sep">·</span>
          <a
            href={commitUrl}
            className="app-footer__commit"
            target="_blank"
            rel="noopener noreferrer"
          >
            {__GIT_COMMIT__}
          </a>
        </>
      )}
      <span className="app-footer__sep">·</span>
      <a
        href={REPO_URL}
        className="app-footer__repo"
        target="_blank"
        rel="noopener noreferrer"
      >
        GitHub
      </a>
      <span className="app-footer__sep">·</span>
      <Link to="/about" className="app-footer__about">
        About
      </Link>
    </footer>
  );
}
