import "./Footer.scss";
import logo from "../../shared/assets/logo.svg";
import Image from "next/image";
import { LINKS } from "@/shared/variables/links";
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";

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} key={link.id}>
                {link.pagename}
              </Link>
            </li>
          ))}
        </ul>
        <NetKgTracker />
      </div>

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

          <li>
            {[youtube, facebook, instagram].map((net, i) => (
              <Link key={i} href="#">
                <Image src={net} alt="Net Icon" key={net} />
              </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">
          {[app_store_btn, play_market_btn].map((app, i) => (
            <Link key={i} href="#">
              <Image src={app} alt="App Button" key={app} />
            </Link>
          ))}
        </div>
      </div>
    </footer>
  );
};

export default Footer;