"use client";
import React from "react";
import Image from "next/image";
import { useTranslations } from "next-intl";
import LocalePath from "@/components/UiComponents/LocalePath";
import AuthWrapper from "../sharedComponents/AuthWrapper";
import FooterCategories from "../UiComponents/footer/FooterCategories";
import { FooterLink, QuickLinks } from "../UiComponents/footer/FooterLinks";

import VisaIcon from "@/assets/images/stores/visa.svg";
import TamaraIcon from "@/assets/images/stores/tamara.svg";
import CardIcon from "@/assets/images/stores/card3.svg";
import MasterIcon from "@/assets/images/stores/mastercard.svg";
import SpayIcon from "@/assets/images/stores/spay.svg";
import PlayBtn from "@/assets/images/Google-Play-Black.png";
import AppleBtn from "@/assets/images/App-Store-Black.png";

import {
  FaFacebookF,
  FaSnapchat,
  FaTwitter,
  FaYoutube,
} from "react-icons/fa";

import "@/styles/layout/footer.scss";

interface Props {
  settings: any;
  categories: any;
}

const paymentIcons = [
  { src: SpayIcon, alt: "spay" },
  { src: MasterIcon, alt: "mastercard" },
  { src: CardIcon, alt: "card" },
  { src: TamaraIcon, alt: "tamara" },
  { src: VisaIcon, alt: "visa" },
];

const socialIcons = [
  { name: "facebook", Icon: FaFacebookF },
  { name: "youtube", Icon: FaYoutube },
  { name: "snapchat", Icon: FaSnapchat },
  { name: "twitter", Icon: FaTwitter },
];

export default function Footer({ settings, categories }: Props) {
  const t = useTranslations("FOOTER");

  return (
    <footer className="relative z-[9] mt-auto w-full bg-white overflow-hidden max-lg:pb-16">
      <AuthWrapper allowedRoles={["guest", "client"]}>
        <div className="container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4 gap-5 py-6 md:py-12">
          {/* Categories */}
          <ul className="text-start capitalize text-lg font-normal">
            <h2 className="font-bold md:text-xl leading-8 mb-2">
              {t("Main")}
            </h2>
            <FooterCategories categories={categories} />
          </ul>

          {/* Quick Links */}
          <ul className="text-start text-lg font-normal">
            <h2 className="font-bold capitalize md:text-xl leading-8 mb-2">
              {t("Quick")}
            </h2>
            <div>
              {QuickLinks.map((el: FooterLink, index: number) => (
                <li
                  key={`QuickLinks_footer_${index}`}
                  className="max-md:text-sm mb-3 md:mb-5 font-normal hover:text-primary transition-all cursor-pointer"
                >
                  <LocalePath href={el.path}>
                    {t(`QuickLinks.${el.name}`)}
                  </LocalePath>
                </li>
              ))}
            </div>
          </ul>

          {/* App Downloads */}
          <ul className="text-start text-lg font-normal">
            <h2 className="font-bold capitalize md:text-xl leading-8 mb-2">
              {t("download_app")}
            </h2>
            <div className="flex items-center lg:items-start lg:flex-col gap-4">
              <LocalePath href="/">
                <Image src={PlayBtn} width={148} height={58} alt="googleplay" className="w-36 md:w-[148px] md:h-[58px] object-contain"/>
              </LocalePath>
              <LocalePath href="/">
                <Image src={AppleBtn} width={148} height={58} alt="appstore" className="w-36 md:w-[148px] md:h-[58px] object-contain" />
              </LocalePath>
            </div>
          </ul>

          {/* Social Media */}
          <ul className="text-start text-lg font-normal sm:col-span-2 lg:col-span-1">
            <h2 className="font-bold md:text-xl leading-8 mb-2">
              {t("Communication")}
            </h2>
            <div className="flex justify-evenly my-4">
              {socialIcons.map(({ name, Icon }, i) => {
                const link = settings?.[name];
                return (
                  link && (
                    <LocalePath key={i} href={link}>
                      <Icon className="text-secondrytext mx-2 bg-greynormal p-3 rounded-full"  size={45} />
                    </LocalePath>
                  )
                );
              })}
            </div>
          </ul>
        </div>
        <div className="container w-full h-[1px] bg-greynormal my-3" />
      </AuthWrapper>

      {/* Footer Bottom */}
      <div className="container py-4">
        <div className="md:flex justify-between items-center">
          <p className="text-sm font-normal leading-6 text-dark text-start">
            {t("roles")}
          </p>
          <div className="flex gap-3 items-center mt-4 md:mt-0">
            <div className="flex items-center gap-5">
              {paymentIcons.map((item, i) => (
                <Image key={`payment_method_${i}`} src={item.src} width={100} height={50} className="w-auto h-auto" alt={item.alt} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}