import Link from 'next/link'
import { Container } from './ui/Container'
import {
  FaFacebook,
  FaInstagram,
  FaLinkedin,
  FaYoutube,
  FaXTwitter,
} from 'react-icons/fa6'
import { HiOutlineMail, HiOutlinePhone, HiOutlineLocationMarker } from 'react-icons/hi'

interface FooterProps {
  socialLinks?: {
    platform: string
    url: string
  }[]
  contact?: {
    email?: string
    phone?: string
    address?: string
  }
}

const socialIcons: Record<string, React.ComponentType<{ className?: string }>> = {
  facebook: FaFacebook,
  instagram: FaInstagram,
  linkedin: FaLinkedin,
  youtube: FaYoutube,
  x: FaXTwitter,
  twitter: FaXTwitter,
}

export function Footer({ socialLinks = [], contact }: FooterProps) {
  return (
    <footer>
      {/* Social Links Bar */}
      {socialLinks.length > 0 && (
        <div className="text-center border-t border-light">
          <ul className="list-none m-0 p-0 py-[65px]">
            {socialLinks.map((social, index) => (
              <li
                key={social.platform}
                className={`
                  inline-block pr-[35px] mr-[35px]
                  font-heading text-[0.85em] tracking-[2px] uppercase
                  ${index < socialLinks.length - 1 ? 'border-r border-gray' : ''}
                `}
              >
                <a
                  href={social.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-dark hover:text-gray-light border-none transition-colors duration-500"
                >
                  {social.platform}
                </a>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Footer Widgets */}
      <div className="bg-dark py-ws-m">
        <Container>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
            {/* About */}
            <div>
              <h4 className="pb-[17px] mb-[25px] border-b border-white/20 font-heading text-[0.85em] tracking-[2px] uppercase text-white">
                About
              </h4>
              <p className="text-[0.9em] text-gray m-0">
                Martin Porwoll - Whistleblower im Zytoskandal Bottrop, Unternehmer und Familienvater.
              </p>
              {/* Social Icons */}
              <ul className="list-none p-0 m-0 mt-[30px]">
                {socialLinks.slice(0, 5).map((social) => {
                  const Icon = socialIcons[social.platform.toLowerCase()]
                  return Icon ? (
                    <li key={social.platform} className="inline-block pr-[15px] text-[22px]">
                      <a
                        href={social.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-gray hover:text-white border-none transition-colors duration-500"
                      >
                        <Icon />
                      </a>
                    </li>
                  ) : null
                })}
              </ul>
            </div>

            {/* Navigation */}
            <div>
              <h4 className="pb-[17px] mb-[25px] border-b border-white/20 font-heading text-[0.85em] tracking-[2px] uppercase text-white">
                Navigation
              </h4>
              <ul className="list-none p-0 m-0 space-y-2">
                {[
                  { label: 'Home', href: '/' },
                  { label: 'Der Mensch', href: '/mensch' },
                  { label: 'Whistleblowing', href: '/whistleblowing' },
                  { label: 'Kontakt', href: '/kontakt' },
                ].map((link) => (
                  <li key={link.href}>
                    <Link
                      href={link.href}
                      className="text-[0.9em] text-gray hover:text-white border-none transition-colors duration-500"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* Rechtliches */}
            <div>
              <h4 className="pb-[17px] mb-[25px] border-b border-white/20 font-heading text-[0.85em] tracking-[2px] uppercase text-white">
                Rechtliches
              </h4>
              <ul className="list-none p-0 m-0 space-y-2">
                <li>
                  <Link
                    href="/impressum"
                    className="text-[0.9em] text-gray hover:text-white border-none transition-colors duration-500"
                  >
                    Impressum
                  </Link>
                </li>
                <li>
                  <Link
                    href="/datenschutz"
                    className="text-[0.9em] text-gray hover:text-white border-none transition-colors duration-500"
                  >
                    Datenschutz
                  </Link>
                </li>
              </ul>
            </div>

            {/* Kontakt */}
            <div>
              <h4 className="pb-[17px] mb-[25px] border-b border-white/20 font-heading text-[0.85em] tracking-[2px] uppercase text-white">
                Kontakt
              </h4>
              <ul className="list-none p-0 m-0 space-y-3">
                {contact?.email && (
                  <li className="flex items-center gap-3 text-[0.9em] text-gray">
                    <HiOutlineMail className="text-[18px]" />
                    <a href={`mailto:${contact.email}`} className="hover:text-white border-none">
                      {contact.email}
                    </a>
                  </li>
                )}
                {contact?.phone && (
                  <li className="flex items-center gap-3 text-[0.9em] text-gray">
                    <HiOutlinePhone className="text-[18px]" />
                    <a href={`tel:${contact.phone}`} className="hover:text-white border-none">
                      {contact.phone}
                    </a>
                  </li>
                )}
                {contact?.address && (
                  <li className="flex items-start gap-3 text-[0.9em] text-gray">
                    <HiOutlineLocationMarker className="text-[18px] mt-0.5" />
                    <span>{contact.address}</span>
                  </li>
                )}
              </ul>
            </div>
          </div>
        </Container>
      </div>

      {/* Copyright Bar */}
      <div className="bg-[#222] py-5">
        <Container>
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            <p className="font-heading text-[0.8em] tracking-[1.3px] uppercase text-gray m-0">
              &copy; {new Date().getFullYear()} Martin Porwoll. Alle Rechte vorbehalten.
            </p>
            <a
              href="#top"
              className="font-heading text-[0.8em] tracking-[1.3px] uppercase text-gray hover:text-white border-none transition-colors duration-500"
            >
              Nach oben
            </a>
          </div>
        </Container>
      </div>
    </footer>
  )
}
