import "./Footer.scss";
import logo from "../../shared/assets/logo.svg";
import Image from "next/image";
import { LINKS } from "@/shared/variables/links_footer";
import youtube from "./icons/youtube.svg";
import facebook from "./icons/facebook.svg";
import instagram from "./icons/instagram.svg";
import app_store_btn from "./icons/app-store-btn.svg";
import play_market_btn from "./icons/play-market-btn.svg";
import { Link } from "@/shared/config/navigation";
import { useTranslations } from "next-intl";
import NetKgTracker from "@/widgets/NetKgTracker/NetKgTracker";
import GoogleAnalyticsWidget from "@/widgets/GoogleAnalyticsWidget/GoogleAnalyticsWidget";

const Footer = () => {
  const t = useTranslations("general");
  const tDisclaimer = useTranslations("disclaimer");
  const tRights = useTranslations("rights");
  return (
    <footer className="footer">
      <div className="footer__logo">
        {/* <Link href="/">
          <Image src={logo} alt="Logo" />
        </Link> */}
        <p>© {tRights("text")}</p>
        <p>{tDisclaimer("text")}</p>
      </div>
      <div className="footer__links">
        <h4>{t("navigation")}</h4>
        <ul>
          {LINKS().map((link) => (
            <li key={link.id}>
              <Link href={link.pathname}>{link.pagename}</Link>
            </li>
          ))}
        </ul>
        {/* Only for production*/}
        <NetKgTracker />
        <div className="footer__logo">
          <GoogleAnalyticsWidget />
        </div>
        *
      </div>

      <div className="footer__contacts">
        <h4>{t("contacts")}</h4>
        <ul>
          <li>admin@kgroad.org</li>
          <li>+9960312394038</li>

          <li>
            {[
              { src: youtube, url: "https://www.youtube.com/@TransparencyKyrgyzstan" },
              { src: facebook, url: "https://www.facebook.com/tikyrgyzstan" },
              { src: instagram, url: "https://www.instagram.com/transparencyinternational_kg?igsh=cTc2MHEwOW5vNDh2" }
            ].map((net, i) => (
              <Link key={i} href={net.url} target="_blank" rel="noopener noreferrer">
                <Image src={net.src} alt="Net Icon" />
              </Link>
            ))}
          </li>

          <li>Photo By ThomasG, CC BY-SA 3.0</li>
        </ul>
      </div>

      <div className="footer__apps">
        <h4>{t("download_our_app")}</h4>
        <div className="footer__apps-btns">
          {[
            { src: app_store_btn, url: "https://play.google.com/store/apps/details?id=fishrungames.kgroad" },
            { src: play_market_btn, url: "https://apps.apple.com/us/app/kg-road/id6484317991" }
          ].map((app, i) => (
            <Link key={i} href={app.url} target="_blank" rel="noopener noreferrer">
              <Image src={app.src} alt="App Button" />
            </Link>
          ))}
        </div>

      </div>
    </footer>
  );
};

export default Footer;