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

export function Footer() {
  const { choice, openSettings } = useAnalyticsConsent();

  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>
          Plimi processes tool inputs locally in your browser.
        </span>
        <nav className="flex flex-wrap items-center gap-x-5 gap-y-2">
          <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>
  );
}