import Image from "next/image";
import Link from "next/link";
import React, { useContext } from "react";
import FooterList from "../../molecules/footer-list";
import AppContext from "../../particles/contexts/app-context";
import { useTranslation } from "next-i18next";

import styles from "./Footer.module.scss";

import logo2 from "../../../public/icons/logo2.svg";

import facebook from "../../../public/icons/social-media/facebook.png";
import twitter from "../../../public/icons/social-media/twitter.png";
import linkedin from "../../../public/icons/social-media/linkedin.png";
import youtube from "../../../public/icons/social-media/youtube.png";
import mobile from "../../../public/icons/social-media/mobile.png";
import email from "../../../public/icons/social-media/email.png";
import location from "../../../public/icons/social-media/location.png";

const Footer = () => {
  const { t } = useTranslation("common");

  const data: any = useContext(AppContext);

  return (
    <footer id="footer" className={styles.footer}>
      <div className="main">
        <div className="container">
          <div className="lg:flex justify-between px-8 gap-4">
            <div className="flex-1 flex items-center flex-col mb-8 lg:mb-0">
              <div className="logo mb-3">
                <Link href="/">
                  <Image src={logo2} alt="" />
                </Link>
              </div>

              <div className="social-icons w-2/3 md:w-1/3 lg:w-2/3">
                <div className="flex justify-between items-center">
                  <div className="icon">
                    <Link href={data.facebook}>
                      <Image src={facebook} alt="" />
                    </Link>
                  </div>

                  <div className="icon">
                    <Link href={data.twitter}>
                      <Image src={twitter} alt="" />
                    </Link>
                  </div>

                  <div className="icon">
                    <Link href={data.linkedin}>
                      <Image src={linkedin} alt="" />
                    </Link>
                  </div>

                  <div className="icon">
                    <Link href={data.youtube}>
                      <Image src={youtube} alt="" />
                    </Link>
                  </div>
                </div>
              </div>
            </div>

            <div className="ltr:lg:pl-20 rtl:lg:pr-20 flex-1 mb-8 lg:mb-0 text-center ltr:lg:text-left rtl:lg:text-right">
              <FooterList
                title={t("Pages")}
                list={[
                  {
                    content: <Link href="/">{t("Home")}</Link>,
                  },
                  {
                    content: <Link href="/services">{t("Services")}</Link>,
                  },
                  {
                    content: <Link href="/projects">{t("Projects")}</Link>,
                  },
                  {
                    content: <Link href="/career">{t("Career")}</Link>,
                  },
                ]}
              />
            </div>

            <div className="flex-1 mb-8 lg:mb-0 text-center ltr:lg:text-left rtl:lg:text-right">
              <FooterList
                title={t("Our Services")}
                list={data.services.map(({ id, name }: any) => ({
                  content: (
                    <Link href={`/services/${id}`} key={id} className="line-clamp-1">
                      {name}
                    </Link>
                  ),
                }))}
              />
            </div>

            <div className="flex-1 mb-8 lg:mb-0 text-center ltr:lg:text-left rtl:lg:text-right">
              <FooterList
                title={t("Quick link")}
                list={[
                  { content: <Link href="/about-us">{t("About Us")}</Link> },
                  { content: <Link href="/contact-us">{t("Contact Us")}</Link> },
                  { content: <Link href="/terms-and-conditions">{t("Terms & Conditions")}</Link> },
                  { content: <Link href="/privacy-policy">{t("Privacy Policy")}</Link> },
                ]}
              />
            </div>

            <div className="flex-1 mb-8 lg:mb-0 text-center ltr:lg:text-left rtl:lg:text-right">
              <FooterList
                title={t("Contact")}
                list={[
                  {
                    content: <div dir="ltr">{data.phone}</div>,
                    icon: <Image src={mobile} alt="" width={14} height={14} />,
                  },
                  {
                    content: data.email,
                    icon: <Image src={email} alt="" width={14} height={14} />,
                  },
                  {
                    content: data.location,
                    icon: <Image src={location} alt="" width={14} height={14} />,
                  },
                ]}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="desinged-by">
        {t("Copyrights reserved")}{" "}
        <b>
          <Link href="https://brainclickads.com/" target="_blank">
            Brainclick
          </Link>
        </b>
      </div>
    </footer>
  );
};

export default Footer;