import { Link } from "react-router-dom";
import { useAnalyticsConsent } from "../../core/privacy/analytics-consent-context";
import { runtimeConfigValue } from "../../core/config/runtime-config";

export function Footer() {
  const { choice, openSettings } = useAnalyticsConsent();
  const repoUrl = runtimeConfigValue(
    "VITE_PLIMI_REPO_URL",
    "https://github.com/achrafachkari/plimi"
  );

  return (
    <footer className="border-t border-[var(--p-border)] px-6 py-6 md:px-14">
      <div className="mx-auto flex max-w-[1200px] flex-col gap-4 text-sm text-[var(--p-muted)] sm:flex-row sm:items-center sm:justify-between">
        <span>
          © {new Date().getFullYear()} Achraf Achkari. Plimi is free software under the{" "}
          <a
            href={repoUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="text-[var(--p-muted)] underline hover:text-[var(--p-text)]"
          >
            AGPL-3.0
          </a>
          .
        </span>
        <nav className="flex flex-wrap items-center gap-x-5 gap-y-2">
          <a
            href={repoUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="text-[var(--p-muted)] no-underline hover:text-[var(--p-text)]"
          >
            Source code
          </a>
          <Link
            to="/privacy"
            className="text-[var(--p-muted)] no-underline hover:text-[var(--p-text)]"
          >
            Privacy & legal
          </Link>
          <button
            onClick={openSettings}
            className="text-[var(--p-muted)] hover:text-[var(--p-text)]"
          >
            Analytics settings ({choice === "granted" ? "on" : "off"})
          </button>
        </nav>
      </div>
    </footer>
  );
}
