import Image from "next/image";
import Link from "next/link";

import { FaFacebookF, FaInstagram, FaLinkedinIn, FaTelegramPlane, FaYoutube } from "react-icons/fa";

import { FaXTwitter } from "react-icons/fa6";

const socialIcons = {
  facebook: FaFacebookF,
  instagram: FaInstagram,
  linkedin: FaLinkedinIn,
  telegram: FaTelegramPlane,
  youtube: FaYoutube,
  x: FaXTwitter,
};

export default function Footer({ footer, locale = "en" }) {
  if (!footer) return null;

  return (
    <footer className="bg-[#0d0d0d]  text-white border-t border-gray-800">
      <div className="mx-auto px-6 py-16 md:px-20">
        <div className="grid gap-16 md:grid-cols-3">
          {/* Company */}

          <div>
            {footer.footerLogo && (
              <Image
                src={footer.footerLogo}
                alt={footer.companyName || "Logo"}
                width={220}
                height={70}
                className="h-16 w-auto object-contain"
              />
            )}

            {footer.companyName && (
              <h2 className="mt-6 text-4xl font-bold text-gold">{footer.companyName}</h2>
            )}

            {footer.description?.[locale] && (
              <p className="mt-6 leading-8 text-gray-400">{footer.description[locale]}</p>
            )}

            <div className="mt-8 flex flex-wrap gap-4">
              {Object.entries(socialIcons).map(([key, Icon]) => {
                const url = footer.social?.[key];

                if (!url) return null;

                return (
                  <a
                    key={key}
                    href={url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="
                        flex
                        h-12
                        w-12
                        items-center
                        justify-center
                        rounded-full
                        border
                        border-gold
                        text-gold
                        transition
                        hover:bg-gold
                        hover:text-black
                      "
                  >
                    <Icon size={18} />
                  </a>
                );
              })}
            </div>
          </div>

          {/* Quick Links */}

          <div>
            <h3 className="mb-8 text-3xl font-semibold text-gold">Quick Links</h3>

            <ul className="space-y-5">
              {(footer.quickLinks || []).map((item, index) => {
                if (!item?.href) return null;

                return (
                  <li key={index}>
                    <Link href={item.href} className="text-gray-400 transition hover:text-gold">
                      {item.title?.[locale]}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>

          {/* Subscribe */}

          <div>
            {footer.subscribeTitle?.[locale] && (
              <h3 className="mb-8 text-3xl font-semibold text-gold">
                {footer.subscribeTitle[locale]}
              </h3>
            )}

            {footer.subscribeDescription?.[locale] && (
              <p className="leading-8 text-gray-400">{footer.subscribeDescription[locale]}</p>
            )}
          </div>
        </div>

        {/* Copyright */}

        {footer.copyright?.[locale] && (
          <div className="mt-16 border-t border-gray-700 pt-4 text-center text-gray-500">
            {footer.copyright[locale]}
          </div>
        )}
      </div>
    </footer>
  );
}