Multi-Column Footer

"use client";
 
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Facebook, Github, Instagram, Linkedin, Twitter } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
 
interface FooterLink {
  label: string;
  href: string;
}
 
interface FooterColumn {
  title: string;
  links: FooterLink[];
}
 
interface SocialLink {
  icon: "twitter" | "facebook" | "instagram" | "linkedin" | "github";
  href: string;
  label: string;
}
 
interface FooterMultiColumnProps {
  companyName: string;
  description?: string;
  columns: FooterColumn[];
  socialLinks?: SocialLink[];
  showNewsletter?: boolean;
  newsletterTitle?: string;
  newsletterDescription?: string;
  onNewsletterSubmit?: (email: string) => Promise<void> | void;
  bottomLinks?: FooterLink[];
  copyrightText?: string;
}
 
const socialIcons = {
  twitter: Twitter,
  facebook: Facebook,
  instagram: Instagram,
  linkedin: Linkedin,
  github: Github,
};
 
export function FooterMultiColumn({
  companyName,
  description,
  columns,
  socialLinks,
  showNewsletter = true,
  newsletterTitle = "Subscribe to our newsletter",
  newsletterDescription = "Get the latest updates and news.",
  onNewsletterSubmit,
  bottomLinks,
  copyrightText,
}: FooterMultiColumnProps) {
  const [email, setEmail] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);
 
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (email && onNewsletterSubmit) {
      setIsLoading(true);
      try {
        await onNewsletterSubmit(email);
        setIsSuccess(true);
        setEmail("");
        setTimeout(() => setIsSuccess(false), 3000);
      } catch (error) {
        console.error("Newsletter signup error:", error);
      } finally {
        setIsLoading(false);
      }
    }
  };
 
  return (
    <footer className="z-30 border-t border-gray-200 bg-white dark:border-zinc-800 dark:bg-black">
      <div className="container mx-auto px-6 py-12 lg:py-16">
        <div className="grid gap-8 lg:grid-cols-12 lg:gap-12">
          <div className="lg:col-span-4">
            <Link href="/" className="inline-block">
              <span className="text-2xl font-bold text-gray-900 dark:text-white">
                {companyName}
              </span>
            </Link>
            {description && (
              <p className="mt-4 text-sm text-gray-600 dark:text-zinc-400">
                {description}
              </p>
            )}
 
            {showNewsletter && (
              <div className="mt-6">
                <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
                  {newsletterTitle}
                </h3>
                <p className="mt-2 text-sm text-gray-600 dark:text-zinc-400">
                  {newsletterDescription}
                </p>
                <form onSubmit={handleSubmit} className="mt-4 space-y-3">
                  <Input
                    type="email"
                    placeholder="Enter your email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                    disabled={isLoading || isSuccess}
                    className="h-10 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-white dark:placeholder:text-zinc-500"
                  />
                  <Button
                    type="submit"
                    disabled={isLoading || isSuccess}
                    className="h-10 w-full bg-gray-900 text-sm font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200"
                  >
                    {isSuccess ? "Subscribed!" : "Subscribe"}
                  </Button>
                </form>
              </div>
            )}
          </div>
 
          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:col-span-8 lg:grid-cols-4">
            {columns.map((column, index) => (
              <div key={index}>
                <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
                  {column.title}
                </h3>
                <ul className="mt-4 space-y-3">
                  {column.links.map((link, linkIndex) => (
                    <li key={linkIndex}>
                      <Link
                        href={link.href}
                        className="text-sm text-gray-600 transition-colors hover:text-gray-900 dark:text-zinc-400 dark:hover:text-white"
                      >
                        {link.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
 
        <div className="mt-12 border-t border-gray-200 pt-8 dark:border-zinc-800">
          <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
            <p className="text-sm text-gray-600 dark:text-zinc-400">
              {copyrightText ||
                `© ${new Date().getFullYear()} ${companyName}. All rights reserved.`}
            </p>
 
            {bottomLinks && bottomLinks.length > 0 && (
              <div className="flex flex-wrap items-center gap-6">
                {bottomLinks.map((link, index) => (
                  <Link
                    key={index}
                    href={link.href}
                    className="text-sm text-gray-600 transition-colors hover:text-gray-900 dark:text-zinc-400 dark:hover:text-white"
                  >
                    {link.label}
                  </Link>
                ))}
              </div>
            )}
 
            {socialLinks && socialLinks.length > 0 && (
              <div className="flex items-center gap-4">
                {socialLinks.map((social, index) => {
                  const Icon = socialIcons[social.icon];
                  return (
                    <Link
                      key={index}
                      href={social.href}
                      aria-label={social.label}
                      className="text-gray-600 transition-colors hover:text-gray-900 dark:text-zinc-400 dark:hover:text-white"
                    >
                      <Icon className="h-5 w-5" />
                    </Link>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </div>
    </footer>
  );
}