import Image from "next/image";
import "./Footer.scss";
import logo from "./assets/logo.png";
import instagram from "./icons/instagram.svg";
import facebook from "./icons/facebook.svg";
import youtube from "./icons/youtube.svg";
import appStore from "./assets/appstore.svg";
import Link from "next/link";

const Footer = () => {
  const pages = [
    { id: 1, page: "Отметить дорогу", path: "/report" },
    { id: 2, page: "О нас", path: "/about-us" },
    { id: 3, page: "Волонтеры", path: "/volunteers" },
    { id: 4, page: "Статистика", path: "/statistics" },
    { id: 5, page: "Новости", path: "/news" },
  ];
  return (
    <footer className="footer">
      <Image src={logo} alt="Logo" className="footer__logo" />

      <div className="footer__links">
        <h4>Навигация</h4>
        <ul>
          {pages.map((page) => (
            <li key={page.id}>
              <Link href={page.path}>{page.page}</Link>
            </li>
          ))}
        </ul>
      </div>

      <div className="footer__contacts">
        <h4>Контакты</h4>
        <ul>
          <li>namename@gmail.com</li>
          <li>+09646895467</li>
        </ul>
        <div className="footer__nets">
          {[youtube, facebook, instagram].map((net) => (
            <Image src={net} alt="Net Icon" key={net} />
          ))}
        </div>
      </div>

      <div className="footer__app">
        <h4>Скачивай наше приложение</h4>
        <Image src={appStore} alt="App Store" />
      </div>
    </footer>
  );
};

export default Footer;