import Link from "next/link";
import Logo from "@/components/Logo";
import { urlWhatsapp } from "@/lib/utils/whatsapp";
import {
  FacebookIcon,
  InstagramIcon,
  TikTokIcon,
  LinkedInIcon,
  XTwitterIcon,
  YouTubeIcon,
} from "@/components/icons/SocialIcons";
import type { InfoUtile } from "@/types/info-utile";
import styles from "./Footer.module.css";

const RESEAUX = (infos: InfoUtile) => [
  { href: infos.lienFacebook, label: "Facebook", Icone: FacebookIcon },
  { href: infos.lienInstagram, label: "Instagram", Icone: InstagramIcon },
  { href: infos.lienTiktok, label: "TikTok", Icone: TikTokIcon },
  { href: infos.lienLinkedin, label: "LinkedIn", Icone: LinkedInIcon },
  { href: infos.lienX, label: "X (Twitter)", Icone: XTwitterIcon },
  { href: infos.lienYoutube, label: "YouTube", Icone: YouTubeIcon },
];

export default function Footer({ infos }: { infos: InfoUtile }) {
  const reseaux = RESEAUX(infos).filter((r) => r.href);

  return (
    <footer className={styles.footer}>
      <div className={styles.inner}>
        <div className={styles.colonne}>
          <Logo variant="blanc" height={64} />
          <p className={styles.slogan}>{infos.slogan}</p>
          {reseaux.length > 0 && (
            <div className={styles.reseaux}>
              {reseaux.map(({ href, label, Icone }) => (
                <a
                  key={label}
                  href={href!}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={label}
                  className={styles.reseauLien}
                >
                  <Icone size={18} />
                </a>
              ))}
            </div>
          )}
        </div>

        <div className={styles.colonne}>
          <h3 className={styles.titre}>Pubago</h3>
          <Link href="/notre-combat">Notre Combat</Link>
          <Link href="/notre-impact">Notre Impact</Link>
          <Link href="/a-propos">À propos</Link>
        </div>

        <div className={styles.colonne}>
          <h3 className={styles.titre}>Offre</h3>
          <Link href="/nos-sacs">Nos Sacs</Link>
          <Link href="/espace-pub">Espace Pub</Link>
          <Link href="/brief-design">Brief Design</Link>
        </div>

        <div className={styles.colonne}>
          <h3 className={styles.titre}>Contact</h3>
          <Link href="/contact">Nous écrire</Link>
          {infos.numeroWhatsapp && (
            <a href={urlWhatsapp(infos.numeroWhatsapp)} target="_blank" rel="noopener noreferrer">
              WhatsApp
            </a>
          )}
          <a href={`mailto:${infos.emailContact}`}>{infos.emailContact}</a>
          <span className={styles.zone}>{infos.zoneCouverture}</span>
        </div>
      </div>

      <div className={styles.bas}>
        <span>© {new Date().getFullYear()} {infos.nomPlateforme}. Tous droits réservés.</span>
        <span>pubago {infos.baseline} · {infos.slogan}</span>
      </div>
    </footer>
  );
}