"use client";


import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Facebook, Twitter, Instagram, Linkedin } from 'lucide-react';

interface FooterProps {
  settings?: any;
}

const Footer = ({ settings }: FooterProps) => {
  const pathname = usePathname() || '';
  if (pathname.startsWith('/dashboard')) return null;

  const siteInfo = settings || {
    siteName: "Afrohub",
    siteSlogan: "La plateforme de référence pour l'entrepreneuriat africain. Visibilité, connexion et croissance pour les TPE/PME.",
    contactEmail: "support@afrohub.com",
    address: "Abidjan, Côte d'Ivoire / Paris, France",
    footerText: "© 2025 Afrohub. Tous droits réservés.",
    facebookUrl: "#",
    twitterUrl: "#",
    instagramUrl: "#",
    linkedinUrl: "#"
  };

  const socialLinks = [
    { icon: Facebook, url: siteInfo.facebookUrl, label: "Facebook" },
    { icon: Twitter, url: siteInfo.twitterUrl, label: "Twitter" },
    { icon: Instagram, url: siteInfo.instagramUrl, label: "Instagram" },
    { icon: Linkedin, url: siteInfo.linkedinUrl, label: "LinkedIn" },
  ].filter(link => link.url && link.url.trim() !== "" && link.url !== "#");

  return (
    <footer className="bg-dark-900 text-white border-t border-gray-800">
      <div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8 text-center sm:text-left">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          <div>
            <h3 className="text-2xl font-serif font-bold text-brand-500 mb-4 tracking-tight uppercase">{siteInfo.siteName}</h3>
            <p className="text-gray-400 text-sm mb-6 max-w-sm">
              {siteInfo.siteSlogan}
            </p>
            {socialLinks.length > 0 && (
              <div className="space-y-4">
                <h4 className="font-bold text-xs uppercase tracking-widest text-gray-500">Suivez-nous</h4>
                <div className="flex space-x-4 justify-center sm:justify-start">
                  {socialLinks.map((social, index) => (
                    <a
                      key={index}
                      href={social.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="p-2 rounded-full border border-gray-800 text-gray-400 hover:text-brand-500 hover:border-brand-500/50 hover:bg-white/5 transition-all"
                      aria-label={social.label}
                    >
                      <social.icon size={18} />
                    </a>
                  ))}
                </div>
              </div>
            )}
          </div>
          <div>
            <h4 className="font-bold text-lg mb-4">Liens Rapides</h4>
            <ul className="space-y-2 text-gray-400 text-sm">
              <li><Link href="/annuaire" className="hover:text-brand-500">Rechercher une entreprise</Link></li>
              <li><Link href="/login" className="hover:text-brand-500">Inscrire mon entreprise</Link></li>
              <li><Link href="/blog" className="hover:text-brand-500">Actualités & Conseils</Link></li>
            </ul>
          </div>
          <div>
            <h4 className="font-bold text-lg mb-4">Contact</h4>
            <p className="text-gray-400 text-sm mb-2">{siteInfo.address}</p>
            <p className="text-gray-400 text-sm">{siteInfo.contactEmail}</p>
            {siteInfo.contactPhone && <p className="text-gray-400 text-sm mt-1">{siteInfo.contactPhone}</p>}
          </div>
          <div>
            <h4 className="font-bold text-lg mb-4">Légal</h4>
            <ul className="space-y-2 text-gray-400 text-sm">
              <li><Link href="/cgu" className="hover:text-brand-500 transition-colors">CGU</Link></li>
              <li><Link href="/cgv" className="hover:text-brand-500 transition-colors">CGV</Link></li>
            </ul>
          </div>
        </div>
        <div className="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
          {siteInfo.footerText}
        </div>
      </div>
    </footer>
  );
};

export default Footer;