"use client";
import { MapPin, Phone, Mail } from "lucide-react";
import { FaLinkedin, FaInstagram, FaXTwitter } from "react-icons/fa6";
import Image from "next/image";
import Link from "next/link";
import { useTranslations } from "next-intl";

interface FooterProps {
  logoUrl?: string;
  tagline?: string;
  address?: string;
  phonePrimary?: string;
  emailGeneral?: string;
  socialLinkedin?: string | null;
  socialInstagram?: string | null;
  socialTwitter?: string | null;
}

const quickLinks = [
  { key: "corporateProfile", to: "/about" },
  { key: "ourProjects", to: "/projects" },
  { key: "trainingCenter", to: "/training" },
  { key: "technologies", to: "/technologies" },
  { key: "contactUs", to: "/contact" },
];

const Footer = ({
  logoUrl,
  tagline,
  address,
  phonePrimary,
  emailGeneral,
  socialLinkedin,
  socialInstagram,
  socialTwitter,
}: FooterProps) => {
  const t = useTranslations("footer");
  const resolvedLogoUrl = logoUrl ?? "/logo-white.png";
  const resolvedAddress = address ?? "KM 17 Port Harcourt Aba Expressway, (By Old Toll Gate) Iriebe, Port Harcourt, \nRivers State, Nigeria.";
  const resolvedPhone = phonePrimary ?? "+234-706-749-5538";
  const resolvedEmail = emailGeneral ?? "info@petrobasegroup.com";
  const resolvedTagline = tagline ?? "A global benchmark in engineering excellence, providing specialized services to the oil and gas industry for over two decades.";

  const socials = [
    socialLinkedin && { Icon: FaLinkedin, href: socialLinkedin, label: "LinkedIn" },
    socialInstagram && { Icon: FaInstagram, href: socialInstagram, label: "Instagram" },
    socialTwitter && { Icon: FaXTwitter, href: socialTwitter, label: "X (Twitter)" },
  ].filter(Boolean) as { Icon: React.ElementType; href: string; label: string }[];

  return (
    <footer id="contact" className="bg-petro-footer text-primary-foreground pt-20 pb-10 px-6">
      <div className="petro-container grid md:grid-cols-2 lg:grid-cols-3 gap-12 mb-20">
        <div>
          <Image src={resolvedLogoUrl} width={160} height={40} alt="Petro-Base Group" />
          <p className="text-primary-foreground/50 text-sm leading-relaxed mb-6 mt-4">
            {resolvedTagline}
          </p>
          {socials.length > 0 && (
            <div className="flex gap-4">
              {socials.map(({ Icon, href, label }) => (
                <a
                  key={label}
                  href={href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={label}
                  className="w-10 h-10 rounded-full border border-primary-foreground/10 flex items-center justify-center hover:bg-accent hover:text-accent-foreground hover:border-accent transition-all"
                >
                  <Icon size={18} />
                </a>
              ))}
            </div>
          )}
        </div>

        <div>
          <h4 className="font-bold mb-8 text-accent uppercase text-xs tracking-widest">{t("quickLinks")}</h4>
          <ul className="space-y-4 text-sm text-primary-foreground/50">
            {quickLinks.map((link) => (
              <li key={link.key}>
                <Link href={link.to} className="hover:text-primary-foreground transition-colors">{t(link.key as Parameters<typeof t>[0])}</Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h4 className="font-bold mb-8 text-accent uppercase text-xs tracking-widest">{t("contactInfo")}</h4>
          <ul className="space-y-6 text-sm text-primary-foreground/50">
            <li className="flex gap-3">
              <MapPin size={18} className="text-accent shrink-0" />
              <span>{resolvedAddress}</span>
            </li>
            <li className="flex gap-3">
              <Phone size={18} className="text-accent shrink-0" />
              <a href={`tel:${resolvedPhone}`} className="hover:text-primary-foreground transition-colors">{resolvedPhone}</a>
            </li>
            <li className="flex gap-3">
              <Mail size={18} className="text-accent shrink-0" />
              <a href={`mailto:${resolvedEmail}`} className="hover:text-primary-foreground transition-colors">{resolvedEmail}</a>
            </li>
          </ul>
        </div>
      </div>

      <div className="petro-container pt-10 border-t border-primary-foreground/5 flex flex-col md:flex-row justify-between items-center gap-6 text-xs text-primary-foreground/30 uppercase tracking-widest">
        <p>© {new Date().getFullYear()} Petro-Base Group. {t("allRightsReserved")}.</p>
        <div className="flex gap-8">
          <Link href="/privacy" className="hover:text-primary-foreground transition-colors">{t("privacyPolicy")}</Link>
          {/* <span className="hover:text-primary-foreground transition-colors cursor-pointer">Terms of Service</span> */}
        </div>
      </div>
    </footer>
  );
};

export default Footer;