import * as React from "react";

import { cn } from "@/lib/utils";

/* ------------------------------------------------------------------ */
/*  Footer (root)                                                      */
/* ------------------------------------------------------------------ */

function Footer({ className, ...props }: React.ComponentProps<"footer">) {
  return (
    <footer
      data-slot="footer"
      className={cn(
        // Force dark-mode color context so the footer always renders as a dark
        // section regardless of the parent theme (bg-foreground inverts in dark mode).
        "dark bg-background text-foreground pt-12 pb-24 px-6 md:pb-6",
        className
      )}
      {...props}
    />
  );
}

/* ------------------------------------------------------------------ */
/*  FooterContent — max-width container                                */
/* ------------------------------------------------------------------ */

function FooterContent({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="footer-content" className={cn("container max-w-6xl", className)} {...props} />;
}

/* ------------------------------------------------------------------ */
/*  FooterGrid — responsive column grid                                */
/* ------------------------------------------------------------------ */

function FooterGrid({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div data-slot="footer-grid" className={cn("grid grid-cols-2 md:grid-cols-5 gap-8 mb-8", className)} {...props} />
  );
}

/* ------------------------------------------------------------------ */
/*  FooterBrand — logo + tagline + socials column                      */
/* ------------------------------------------------------------------ */

function FooterBrand({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="footer-brand" className={cn("col-span-2 md:col-span-1", className)} {...props} />;
}

/* ------------------------------------------------------------------ */
/*  FooterDescription — small muted tagline                            */
/* ------------------------------------------------------------------ */

function FooterDescription({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="footer-description"
      className={cn("text-xs text-primary-foreground/50 mt-3 leading-relaxed", className)}
      {...props}
    />
  );
}

/* ------------------------------------------------------------------ */
/*  FooterSocials — horizontal row of icon links                       */
/* ------------------------------------------------------------------ */

function FooterSocials({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="footer-socials" className={cn("flex gap-1.5 mt-4", className)} {...props} />;
}

/* ------------------------------------------------------------------ */
/*  FooterSocialLink — single social icon link                         */
/* ------------------------------------------------------------------ */

function FooterSocialLink({ className, ...props }: React.ComponentProps<"a">) {
  return (
    <a
      data-slot="footer-social-link"
      target="_blank"
      rel="noopener noreferrer"
      className={cn(
        "h-8 w-8 rounded-md border border-primary-foreground/[0.06] flex items-center justify-center",
        "text-primary-foreground/35 hover:text-primary hover:border-primary/30 transition-colors",
        className,
      )}
      {...props}
    />
  );
}

/* ------------------------------------------------------------------ */
/*  FooterGroup — single link-group column                             */
/* ------------------------------------------------------------------ */

function FooterGroup({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="footer-group" className={cn("", className)} {...props} />;
}

/* ------------------------------------------------------------------ */
/*  FooterGroupTitle — uppercase heading for a group                   */
/* ------------------------------------------------------------------ */

function FooterGroupTitle({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="footer-group-title"
      className={cn("text-xs font-semibold tracking-[.1em] uppercase text-primary-foreground/40 mb-4", className)}
      {...props}
    />
  );
}

/* ------------------------------------------------------------------ */
/*  FooterGroupLinks — list wrapper                                    */
/* ------------------------------------------------------------------ */

function FooterGroupLinks({ className, ...props }: React.ComponentProps<"ul">) {
  return <ul data-slot="footer-group-links" className={cn("space-y-2", className)} {...props} />;
}

/* ------------------------------------------------------------------ */
/*  FooterLink — single navigation link (works as <a> or wraps child) */
/* ------------------------------------------------------------------ */

function FooterLink({ className, ...props }: React.ComponentProps<"a">) {
  return (
    <li>
      <a
        data-slot="footer-link"
        className={cn("text-sm text-primary-foreground/60 hover:text-primary transition-colors", className)}
        {...props}
      />
    </li>
  );
}

/* ------------------------------------------------------------------ */
/*  FooterSeparator — themed horizontal rule                           */
/* ------------------------------------------------------------------ */

function FooterSeparator({ className, ...props }: React.ComponentProps<"hr">) {
  return <hr data-slot="footer-separator" className={cn("border-primary-foreground/10 mb-4", className)} {...props} />;
}

/* ------------------------------------------------------------------ */
/*  FooterBottom — copyright + legal links bar                         */
/* ------------------------------------------------------------------ */

function FooterBottom({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="footer-bottom"
      className={cn(
        "flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-primary-foreground/40",
        className,
      )}
      {...props}
    />
  );
}

/* ------------------------------------------------------------------ */
/*  FooterBottomLinks — row of legal/meta links                        */
/* ------------------------------------------------------------------ */

function FooterBottomLinks({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="footer-bottom-links" className={cn("flex gap-4", className)} {...props} />;
}

/* ------------------------------------------------------------------ */
/*  FooterBottomLink — single legal link                               */
/* ------------------------------------------------------------------ */

function FooterBottomLink({ className, ...props }: React.ComponentProps<"a">) {
  return (
    <a data-slot="footer-bottom-link" className={cn("hover:text-primary transition-colors", className)} {...props} />
  );
}

/* ------------------------------------------------------------------ */
/*  Exports                                                            */
/* ------------------------------------------------------------------ */

export {
  Footer,
  FooterContent,
  FooterGrid,
  FooterBrand,
  FooterDescription,
  FooterSocials,
  FooterSocialLink,
  FooterGroup,
  FooterGroupTitle,
  FooterGroupLinks,
  FooterLink,
  FooterSeparator,
  FooterBottom,
  FooterBottomLinks,
  FooterBottomLink,
};
Installation

Examples

Default
