import Link from "next/link";
import React from "react";
import Image from "next/image";
import { useSelector } from "react-redux";
import { RootState } from "@/Redux/store";
import style from '@/styles/footer.module.css'
import { userActivity } from "@/components/commonFunctions/userActivity";

const Footer = () => {
  const _loggedIn_user = useSelector((state: RootState) => state.user.user);

  const about = () => {
    userActivity(
      _loggedIn_user?._id,
      "website",
      "About us ",
      {
        pageVisit: `/about`,
      },
      navigator.userAgent
    );
  };
  const careers = () => {
    userActivity(
      _loggedIn_user?._id,
      "website",
      "Careers",
      {
        pageVisit: `/careers`,
      },
      navigator.userAgent
    );
  };
  const contact = () => {
    userActivity(
      _loggedIn_user?._id,
      "website",
      "Contact us",
      {
        pageVisit: `/contact`,
      },
      navigator.userAgent
    );
  };
  const privacypolicy = () => {
    userActivity(
      _loggedIn_user?._id,
      "website",
      "Privacy policy ",
      {
        pageVisit: `/privacy-policy`,
      },
      navigator.userAgent
    );
  };
  const terms = () => {
    userActivity(
      _loggedIn_user?._id,
      "website",
      "T&C",
      {
        pageVisit: `/terms`,
      },
      navigator.userAgent
    );
  };
  const Faq = () => {
    userActivity(
      _loggedIn_user?._id,
      "website",
      "Faq",
      {
        pageVisit: `/Faq`,
      },
      navigator.userAgent
    );
  };

  return (
    <>




<div className={" ".concat(style.stickyIcon)}>
      <Link href={"https://api.whatsapp.com/send/?phone=2348022220190"} target="_blank">

        <Image
          src={"/images/whatsapp.png"}
          width={50}
          height={50}
          alt="whatsapp logo"
          className="cursor-pointer hover:scale-110 animate-bounce "
        />
      </Link>
    </div>


      <div className="bg-white w-full flex flex-col sm:flex-row py-2 px-2">
        <Link href="/" className="sm:w-1/3 w-full flex items-center justify-center">
          <div className="flex justify-center">
            <Image
              src="/images/jazzagian-logo.png"
              width={60}
              height={60}
              alt="Jazzagian Logo"
              className="w-32"
            />
          </div>
        </Link>
        <div className="grid grid-cols-3 gap-4 w-full text-xs">
          <Link className="py-2 hover:text-[#FE342B] transition-all duration-300" href="/about" onClick={about}>
            | About us
          </Link>
          <Link className="py-2 hover:text-[#FE342B] transition-all duration-300" href="/careers"  onClick={careers}>
            | Careers
          </Link>
          <Link className="py-2 hover:text-[#FE342B] transition-all duration-300" href="/contact" onClick={contact}>
            | Contact us
          </Link>
          <Link className="py-2 hover:text-[#FE342B] transition-all duration-300" href="/privacy-policy" onClick={privacypolicy}>
            | Privacy Policy
          </Link>
          <Link className="py-2 hover:text-[#FE342B] transition-all duration-300" href="/terms" onClick={terms}>
            | T&C
          </Link>
          <Link className="py-2 hover:text-[#FE342B] transition-all duration-300" href="/Faq" onClick={Faq}>
            | FAQ
          </Link>
        </div>
      </div>
      <div className="w-full bg-[#383736] text-xs sm:text-sm lg:text-base">
        <div className="py-4 text-white font-semibold w-11/12 mx-auto flex flex-col items-center sm:flex-row justify-between">
          <span>NIGERIA</span>
          <span className="m-auto">
            All rights reserved &copy; 2023 PREOWNEDMARKETS LIMITED
          </span>
        </div>
      </div>
    </>
  );
};

export default Footer;