"use client";

import { config } from "@/lib/config";
import { Link } from "@/lib/navigation";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";

export default function AppFooter() {
  const [version, setVersion] = useState<string>("");
  const t = useTranslations("About");

  useEffect(() => {
    fetch("/api/version")
      .then((res) => res.json())
      .then((data) => setVersion(data.version))
      .catch(() => setVersion(""));
  }, []);

  if (!config.credits.enabled) return null;

  return (
    <footer className="app-footer">
      <p>
        {config.credits.text}{" "}
        <a
          href={config.credits.linkUrl}
          target="_blank"
          rel="noopener noreferrer"
        >
          {config.credits.linkText}
        </a>
        {version && (
          <>
            {" "}
            ·{" "}
            <span style={{ fontSize: "0.85em", opacity: 0.7 }}>{version}</span>
          </>
        )}
      </p>
      <p style={{ marginTop: "0.5rem", fontSize: "0.85rem" }}>
        <Link href="/about" style={{ textDecoration: "underline" }}>
          {t("footerLinkLabel")}
        </Link>
      </p>
    </footer>
  );
}