Social Footer

import Link from "next/link";
import {
  FaXTwitter,
  FaFacebook,
  FaInstagram,
  FaLinkedin,
  FaGithub,
  FaYoutube,
} from "react-icons/fa6";
 
interface FooterLink {
  label: string;
  href: string;
}
 
interface SocialLink {
  icon: "x" | "facebook" | "instagram" | "linkedin" | "github" | "youtube";
  href: string;
  label: string;
  username?: string;
}
 
interface FooterSocialProps {
  companyName: string;
  tagline?: string;
  socialLinks: SocialLink[];
  links?: FooterLink[];
  copyrightText?: string;
}
 
const socialIcons = {
  x: FaXTwitter,
  facebook: FaFacebook,
  instagram: FaInstagram,
  linkedin: FaLinkedin,
  github: FaGithub,
  youtube: FaYoutube,
};
 
const socialColors = {
  x: "hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black",
  facebook: "hover:bg-blue-600 hover:text-white",
  instagram: "hover:bg-pink-600 hover:text-white",
  linkedin: "hover:bg-blue-700 hover:text-white",
  github:
    "hover:bg-gray-900 hover:text-white dark:hover:bg-white dark:hover:text-gray-900",
  youtube: "hover:bg-red-600 hover:text-white",
};
 
export function FooterSocial({
  companyName,
  tagline,
  socialLinks,
  links,
  copyrightText,
}: FooterSocialProps) {
  return (
    <footer className="relative w-full overflow-hidden border-t border-gray-200 bg-white py-12 dark:border-gray-800 dark:bg-gray-950 sm:py-16 rounded">
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:24px_24px]" />
 
      <div className="container relative mx-auto w-full px-6">
        <div className="mx-auto max-w-7xl">
          <div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
            <div className="flex flex-col justify-center">
              <Link href="/" className="group inline-block">
                <span className="text-2xl font-bold text-gray-900 transition-colors dark:text-white sm:text-3xl">
                  {companyName}
                </span>
              </Link>
 
              {tagline && (
                <p className="mt-3 text-sm text-gray-600 dark:text-gray-400 sm:text-base">
                  {tagline}
                </p>
              )}
 
              {links && links.length > 0 && (
                <nav className="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2">
                  {links.map((link, index) => (
                    <Link
                      key={index}
                      href={link.href}
                      className="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
                    >
                      {link.label}
                    </Link>
                  ))}
                </nav>
              )}
            </div>
 
            <div className="flex items-center justify-center lg:justify-end">
              <div className="flex flex-wrap items-center justify-center gap-3 sm:gap-4">
                {socialLinks.map((social, index) => {
                  const Icon = socialIcons[social.icon];
                  const colorClass = socialColors[social.icon];
                  return (
                    <Link
                      key={index}
                      href={social.href}
                      aria-label={social.label}
                      className={`group relative flex h-12 w-12 items-center justify-center rounded-xl border-2 border-gray-200 bg-white text-gray-700 shadow-lg transition-all hover:scale-110 hover:border-transparent hover:shadow-xl dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 sm:h-14 sm:w-14 ${colorClass}`}
                    >
                      <Icon className="h-5 w-5 sm:h-6 sm:w-6" />
                      {social.username && (
                        <span className="absolute -bottom-6 left-1/2 -translate-x-1/2 whitespace-nowrap text-xs font-medium text-gray-500 opacity-0 transition-opacity group-hover:opacity-100 dark:text-gray-400">
                          @{social.username}
                        </span>
                      )}
                    </Link>
                  );
                })}
              </div>
            </div>
          </div>
 
          <div className="mt-10 border-t border-gray-200 pt-6 dark:border-gray-800 sm:mt-12 sm:pt-8">
            <p className="text-sm text-gray-500 dark:text-gray-500">
              {copyrightText ||
                `© ${new Date().getFullYear()} ${companyName}. All rights reserved.`}
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}