'use client';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import {
  Facebook,
  Instagram,
  Linkedin,
  Mail,
  MapPin,
  Phone,
  Twitter,
} from 'lucide-react';
import Link from 'next/link';
import type { ReactNode } from 'react';

interface FooterProps {
  className?: string;
  brandName?: string;
  tagline?: string;
  logo?: ReactNode;
  showSocial?: boolean;
  showContact?: boolean;
}

interface FooterLink {
  label: string;
  href: string;
  external?: boolean;
}

interface FooterSection {
  title: string;
  links: FooterLink[];
}

const defaultNavigationLinks: FooterSection[] = [
  {
    title: 'Navigation',
    links: [
      { label: 'Home', href: '/' },
      { label: 'Shop', href: '/shop' },
      { label: 'About', href: '/about' },
      { label: 'Contact', href: '/contact' },
    ],
  },
  {
    title: 'Support',
    links: [
      { label: 'FAQ', href: '/faq' },
      { label: 'Returns', href: '/returns' },
      { label: 'Shipping Info', href: '/shipping' },
      { label: 'Size Guide', href: '/size-guide' },
    ],
  },
  {
    title: 'Legal',
    links: [
      { label: 'Privacy Policy', href: '/privacy' },
      { label: 'Terms of Service', href: '/terms' },
      { label: 'Cookie Policy', href: '/cookies' },
      { label: 'Accessibility', href: '/accessibility' },
    ],
  },
];

const socialLinks = [
  {
    name: 'Facebook',
    href: 'https://facebook.com',
    icon: Facebook,
    label: 'Follow us on Facebook',
  },
  {
    name: 'Instagram',
    href: 'https://instagram.com',
    icon: Instagram,
    label: 'Follow us on Instagram',
  },
  {
    name: 'Twitter',
    href: 'https://twitter.com',
    icon: Twitter,
    label: 'Follow us on Twitter',
  },
  {
    name: 'LinkedIn',
    href: 'https://linkedin.com',
    icon: Linkedin,
    label: 'Connect with us on LinkedIn',
  },
];

const FooterLink = ({ link }: { link: FooterLink }) => {
  if (link.external) {
    return (
      <Button
        variant="link"
        asChild
        className="text-muted-foreground hover:text-foreground h-auto justify-start p-0 text-sm"
      >
        <a
          href={link.href}
          target="_blank"
          rel="noopener noreferrer"
          aria-describedby="external-link-description"
        >
          {link.label}
        </a>
      </Button>
    );
  }

  return (
    <Button
      variant="link"
      asChild
      className="text-muted-foreground hover:text-foreground h-auto justify-start p-0 text-sm"
    >
      <Link href={link.href}>{link.label}</Link>
    </Button>
  );
};

const FooterSection = ({ section }: { section: FooterSection }) => (
  <div className="space-y-4">
    <h3 className="text-foreground text-sm font-semibold">{section.title}</h3>
    <nav
      className="flex flex-col space-y-2"
      role="navigation"
      aria-label={section.title}
    >
      {section.links.map((link) => (
        <FooterLink key={link.href} link={link} />
      ))}
    </nav>
  </div>
);

const SocialLinks = () => (
  <div className="space-y-4">
    <h3 className="text-foreground text-sm font-semibold">Follow Us</h3>
    <div className="flex space-x-3">
      {socialLinks.map((social) => {
        const Icon = social.icon;
        return (
          <Button
            key={social.name}
            variant="outline"
            size="icon"
            asChild
            className="hover:bg-accent size-9"
          >
            <a
              href={social.href}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={social.label}
            >
              <Icon className="size-4" />
            </a>
          </Button>
        );
      })}
    </div>
  </div>
);

const ContactInfo = () => (
  <div className="space-y-4">
    <h3 className="text-foreground text-sm font-semibold">Contact Us</h3>
    <div className="text-muted-foreground space-y-3 text-sm">
      <div className="flex items-center space-x-2">
        <Mail className="size-4" />
        <a
          href="mailto:support@example.com"
          className="hover:text-foreground transition-colors"
        >
          support@example.com
        </a>
      </div>
      <div className="flex items-center space-x-2">
        <Phone className="size-4" />
        <a
          href="tel:+1234567890"
          className="hover:text-foreground transition-colors"
        >
          +1 (234) 567-890
        </a>
      </div>
      <div className="flex items-center space-x-2">
        <MapPin className="size-4" />
        <span>123 Business St, City, State 12345</span>
      </div>
    </div>
  </div>
);

export const Footer = ({
  className,
  brandName = 'Your Brand',
  tagline = 'Building amazing experiences',
  logo,
  showSocial = true,
  showContact = true,
  ...props
}: FooterProps) => {
  return (
    <footer className={cn('bg-background', className)} {...props}>
      <div className="container mx-auto px-4 py-12 lg:py-16">
        {/* Main Footer Content */}
        <div className="space-y-8">
          {/* Top Row: Brand and Navigation */}
          <div className="grid gap-8 lg:grid-cols-10">
            {/* Brand Section */}
            <div className="space-y-4 lg:col-span-4">
              <div className="space-y-2">
                {logo || (
                  <h2 className="text-foreground text-xl font-bold">
                    {brandName}
                  </h2>
                )}
                {tagline && (
                  <p className="text-muted-foreground max-w-xs text-sm">
                    {tagline}
                  </p>
                )}
              </div>
              {showSocial && <SocialLinks />}
            </div>

            {/* Navigation Sections */}
            <div className="grid gap-8 sm:grid-cols-3 lg:col-span-6">
              {defaultNavigationLinks.map((section) => (
                <FooterSection key={section.title} section={section} />
              ))}
            </div>
          </div>

          {/* Contact Section - Below on its own row */}
          {showContact && (
            <div className="border-border border-t pt-8">
              <ContactInfo />
            </div>
          )}
        </div>

        {/* Bottom Section */}
        <div className="border-border mt-12 border-t pt-8">
          <div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
            <p className="text-muted-foreground text-sm">
              © {new Date().getFullYear()} {brandName}. All rights reserved.
            </p>
            <div className="flex flex-wrap gap-4 text-sm">
              <Button
                variant="link"
                className="text-muted-foreground hover:text-foreground h-auto p-0"
                asChild
              >
                <Link href="/privacy">Privacy</Link>
              </Button>
              <Button
                variant="link"
                className="text-muted-foreground hover:text-foreground h-auto p-0"
                asChild
              >
                <Link href="/terms">Terms</Link>
              </Button>
              <Button
                variant="link"
                className="text-muted-foreground hover:text-foreground h-auto p-0"
                asChild
              >
                <Link href="/cookies">Cookies</Link>
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* Hidden description for screen readers */}
      <span id="external-link-description" className="sr-only">
        Opens in a new window
      </span>
    </footer>
  );
};

export default Footer;
Installation

Usage

Examples

Default

Custom

Minimal
