Minimal Footer

import { Facebook, Github, Instagram, Linkedin, Twitter } from "lucide-react";
import Link from "next/link";
 
interface FooterLink {
  label: string;
  href: string;
}
 
interface SocialLink {
  icon: "twitter" | "facebook" | "instagram" | "linkedin" | "github";
  href: string;
  label: string;
}
 
interface FooterMinimalProps {
  companyName: string;
  links: FooterLink[];
  socialLinks?: SocialLink[];
  copyrightText?: string;
}
 
const socialIcons = {
  twitter: Twitter,
  facebook: Facebook,
  instagram: Instagram,
  linkedin: Linkedin,
  github: Github,
};
 
export function FooterMinimal({
  companyName,
  links,
  socialLinks,
  copyrightText,
}: FooterMinimalProps) {
  const currentYear = new Date().getFullYear();
  const copyright =
    copyrightText || `© ${currentYear} ${companyName}. All rights reserved.`;
 
  return (
    <footer className="relative overflow-hidden bg-gradient-to-b from-gray-50 to-white py-16 dark:from-gray-900 dark:to-gray-950 rounded">
      <div className="container relative mx-auto px-6">
        <div className="flex flex-col gap-12">
          <div className="flex flex-col items-start justify-between gap-8 lg:flex-row lg:items-center">
            <div>
              <Link href="/" className="group inline-block">
                <span className="text-2xl font-bold tracking-tight text-gray-900 transition-colors dark:text-white">
                  {companyName}
                </span>
                <div className="mt-2 h-0.5 w-0 bg-gray-900 transition-all duration-300 group-hover:w-full dark:bg-white" />
              </Link>
            </div>
 
            <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:gap-8">
              <nav className="flex flex-wrap items-center gap-x-1 gap-y-3">
                {links.map((link, index) => (
                  <div key={index} className="flex items-center gap-1">
                    <Link
                      href={link.href}
                      className="px-3 py-1 text-sm font-medium text-gray-700 transition-all hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
                    >
                      {link.label}
                    </Link>
                    {index < links.length - 1 && (
                      <span className="text-gray-300 dark:text-gray-700">
                        •
                      </span>
                    )}
                  </div>
                ))}
              </nav>
 
              {socialLinks && socialLinks.length > 0 && (
                <div className="flex items-center gap-3">
                  {socialLinks.map((social, index) => {
                    const Icon = socialIcons[social.icon];
                    return (
                      <Link
                        key={index}
                        href={social.href}
                        aria-label={social.label}
                        className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-100 text-gray-700 transition-all hover:bg-gray-900 hover:text-white dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-white dark:hover:text-gray-900"
                      >
                        <Icon className="h-4 w-4" />
                      </Link>
                    );
                  })}
                </div>
              )}
            </div>
          </div>
 
          <div className="border-t border-gray-200 pt-8 dark:border-gray-800">
            <p className="text-sm text-gray-600 dark:text-gray-400">
              {copyright}
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}