import * as React from "react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { type StylePreset, getStylePreset } from "@/lib/style-presets";

const navigation = {
  product: [
    { name: "Features", href: "#" },
    { name: "Pricing", href: "#" },
    { name: "Integrations", href: "#" },
    { name: "Changelog", href: "#" },
  ],
  company: [
    { name: "About", href: "#" },
    { name: "Blog", href: "#" },
    { name: "Careers", href: "#" },
    { name: "Press", href: "#" },
  ],
  resources: [
    { name: "Documentation", href: "#" },
    { name: "Help Center", href: "#" },
    { name: "Community", href: "#" },
    { name: "Templates", href: "#" },
  ],
  legal: [
    { name: "Privacy", href: "#" },
    { name: "Terms", href: "#" },
    { name: "Cookie Policy", href: "#" },
  ],
};

const socials = [
  {
    name: "X",
    href: "#",
    icon: (
      <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
      </svg>
    ),
  },
  {
    name: "GitHub",
    href: "#",
    icon: (
      <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
        />
      </svg>
    ),
  },
  {
    name: "Discord",
    href: "#",
    icon: (
      <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
        <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
      </svg>
    ),
  },
];

type StyleConfig = {
  wrapper: string;
  brandIcon: string;
  brandText: string;
  description: string;
  socialLink: string;
  navHeading: string;
  navLink: string;
  divider: string;
  bottomText: string;
  bottomLink: string;
};

const styleConfigs: Record<StylePreset, StyleConfig> = {
  modern: {
    wrapper: "rounded-3xl bg-card border border-border",
    brandIcon: "bg-primary text-primary-foreground",
    brandText: "text-foreground",
    description: "text-muted-foreground",
    socialLink: "text-muted-foreground hover:text-foreground",
    navHeading: "text-foreground",
    navLink: "text-muted-foreground hover:text-foreground",
    divider: "border-border",
    bottomText: "text-muted-foreground",
    bottomLink: "text-muted-foreground hover:text-foreground",
  },
  glassmorphism: {
    wrapper: "rounded-3xl bg-[var(--style-bg-input)] border border-[var(--style-border-color)] backdrop-blur-xl",
    brandIcon: "bg-[var(--style-bg-surface)] text-background",
    brandText: "text-background",
    description: "text-[var(--style-text-muted)]",
    socialLink: "text-[var(--style-text-muted)] hover:text-background",
    navHeading: "text-background",
    navLink: "text-[var(--style-text-muted)] hover:text-background",
    divider: "border-[var(--style-border-color)]",
    bottomText: "text-[var(--style-text-muted)]",
    bottomLink: "text-[var(--style-text-muted)] hover:text-background",
  },
  neumorphism: {
    wrapper:
      "rounded-3xl bg-card shadow-[var(--style-shadow)]",
    brandIcon:
      "bg-card text-foreground shadow-[var(--style-shadow-inset)]",
    brandText: "text-foreground",
    description: "text-foreground",
    socialLink: "text-foreground hover:text-foreground",
    navHeading: "text-foreground",
    navLink: "text-foreground hover:text-foreground",
    divider: "border-border",
    bottomText: "text-foreground",
    bottomLink: "text-foreground hover:text-foreground",
  },
  brutalist: {
    wrapper: "border-4 border-[var(--style-border-color)] bg-background shadow-[var(--style-shadow-lg)]",
    brandIcon: "bg-foreground text-background",
    brandText: "text-foreground font-[var(--style-font-family)]",
    description: "text-foreground font-[var(--style-font-family)]",
    socialLink: "text-foreground font-[var(--style-font-family)] hover:text-foreground",
    navHeading: "text-foreground font-[var(--style-font-family)]",
    navLink: "text-foreground font-[var(--style-font-family)] hover:text-foreground",
    divider: "border-[var(--style-border-color)]",
    bottomText: "text-foreground font-[var(--style-font-family)]",
    bottomLink: "text-foreground font-[var(--style-font-family)] hover:text-foreground",
  },
  "retro-mac": {
    wrapper: "border border-[var(--style-border-color)] bg-card shadow-[var(--style-shadow)]",
    brandIcon: "bg-background text-foreground border border-[var(--style-border-color)]",
    brandText: "text-foreground font-[var(--style-font-family)]",
    description: "text-[var(--style-text-muted)] font-[var(--style-font-family)]",
    socialLink: "text-[var(--style-text-muted)] hover:text-foreground font-[var(--style-font-family)]",
    navHeading: "text-foreground font-[var(--style-font-family)]",
    navLink: "text-[var(--style-text-muted)] hover:text-foreground font-[var(--style-font-family)]",
    divider: "border-[var(--style-border-color)]",
    bottomText: "text-[var(--style-text-muted)] font-[var(--style-font-family)]",
    bottomLink: "text-[var(--style-text-muted)] hover:text-foreground font-[var(--style-font-family)]",
  },
  "windows-95": {
    wrapper:
      "bg-card shadow-[var(--style-shadow)]",
    brandIcon:
      "bg-card text-foreground shadow-[var(--style-button-shadow)]",
    brandText: "text-foreground font-[var(--style-font-family)]",
    description: "text-[var(--style-text-muted)] font-[var(--style-font-family)]",
    socialLink: "text-[var(--style-text-muted)] hover:text-foreground font-[var(--style-font-family)]",
    navHeading: "text-foreground font-[var(--style-font-family)]",
    navLink: "text-[var(--style-text-muted)] hover:text-foreground font-[var(--style-font-family)]",
    divider: "border-border",
    bottomText: "text-[var(--style-text-muted)] font-[var(--style-font-family)]",
    bottomLink: "text-[var(--style-text-muted)] hover:text-foreground font-[var(--style-font-family)]",
  },
  flat: {
    wrapper: "rounded-2xl bg-muted",
    brandIcon: "bg-primary text-primary-foreground",
    brandText: "text-foreground",
    description: "text-muted-foreground",
    socialLink: "text-muted-foreground hover:text-foreground",
    navHeading: "text-foreground",
    navLink: "text-muted-foreground hover:text-foreground",
    divider: "border-border",
    bottomText: "text-muted-foreground",
    bottomLink: "text-muted-foreground hover:text-foreground",
  },
  skeuomorphic: {
    wrapper:
      "rounded-2xl bg-gradient-to-b from-[var(--style-bg-surface)] to-[var(--style-bg-input)] border border-border shadow-lg",
    brandIcon: "bg-background text-muted-foreground border border-border",
    brandText: "text-muted-foreground",
    description: "text-muted-foreground",
    socialLink: "text-muted-foreground hover:text-muted-foreground",
    navHeading: "text-muted-foreground",
    navLink: "text-muted-foreground hover:text-muted-foreground",
    divider: "border-border",
    bottomText: "text-muted-foreground",
    bottomLink: "text-muted-foreground hover:text-muted-foreground",
  },
};

interface FooterProps {
  className?: string;
  /**
   * Visual style preset
   * @default "modern"
   */
  stylePreset?: StylePreset;
}

export function Footer({ className, stylePreset = "modern" }: FooterProps) {
  const styles = styleConfigs[stylePreset];
  const presetVariables = getStylePreset(stylePreset).variables;

  const rootStyle: React.CSSProperties = {
    ...(presetVariables as React.CSSProperties),
    fontFamily: "var(--style-font-family)",
    borderRadius: "var(--style-radius-lg)",
    borderWidth: "var(--style-border-width)",
    boxShadow: "var(--style-shadow)",
  };

  return (
    <footer
      className={cn("card px-6 py-12", styles.wrapper, className)}
      style={rootStyle}
    >
      <div className="space-y-10">
        {/* Main footer content */}
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-5">
          {/* Brand column */}
          <div className="lg:col-span-1">
            <Link href="/" className="flex items-center gap-2">
              <div
                className={cn(
                  "flex h-8 w-8 items-center justify-center rounded-lg",
                  styles.brandIcon
                )}
                style={{ borderRadius: "var(--style-radius)" }}
              >
                <span className="text-sm font-bold">U</span>
              </div>
              <span className={cn("text-lg font-semibold", styles.brandText)}>
                ACME
              </span>
            </Link>
            <p className={cn("mt-4 text-sm", styles.description)}>
              Building the future of web experiences, one component at a time.
            </p>
            {/* Social links */}
            <div className="mt-6 flex gap-4">
              {socials.map((social) => (
                <a
                  key={social.name}
                  href={social.href}
                  className={cn(
                    "transition-colors",
                    styles.socialLink
                  )}
                  aria-label={social.name}
                >
                  {social.icon}
                </a>
              ))}
            </div>
          </div>

          {/* Navigation columns */}
          <div>
            <h3 className={cn("text-sm font-semibold", styles.navHeading)}>
              Product
            </h3>
            <ul className="mt-4 space-y-3">
              {navigation.product.map((item) => (
                <li key={item.name}>
                  <Link
                    href={item.href}
                    className={cn("text-sm transition-colors", styles.navLink)}
                  >
                    {item.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className={cn("text-sm font-semibold", styles.navHeading)}>
              Company
            </h3>
            <ul className="mt-4 space-y-3">
              {navigation.company.map((item) => (
                <li key={item.name}>
                  <Link
                    href={item.href}
                    className={cn("text-sm transition-colors", styles.navLink)}
                  >
                    {item.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className={cn("text-sm font-semibold", styles.navHeading)}>
              Resources
            </h3>
            <ul className="mt-4 space-y-3">
              {navigation.resources.map((item) => (
                <li key={item.name}>
                  <Link
                    href={item.href}
                    className={cn("text-sm transition-colors", styles.navLink)}
                  >
                    {item.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className={cn("text-sm font-semibold", styles.navHeading)}>
              Legal
            </h3>
            <ul className="mt-4 space-y-3">
              {navigation.legal.map((item) => (
                <li key={item.name}>
                  <Link
                    href={item.href}
                    className={cn("text-sm transition-colors", styles.navLink)}
                  >
                    {item.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Bottom bar */}
        <div
          className={cn(
            "flex flex-col items-center justify-between gap-4 border-t pt-8 sm:flex-row",
            styles.divider
          )}
        >
          <p className={cn("text-sm", styles.bottomText)}>
            &copy; {new Date().getFullYear()} ACME Inc. All rights reserved.
          </p>
          <div className="flex gap-6">
            <Link
              href="#"
              className={cn("text-sm transition-colors", styles.bottomLink)}
            >
              Privacy Policy
            </Link>
            <Link
              href="#"
              className={cn("text-sm transition-colors", styles.bottomLink)}
            >
              Terms of Service
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
}
Footer

Dependencies

Files

Installation
