Footer Status

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

export interface FooterStatusProps {
  brand?: string;
  brandHref?: string;
  status?: { label: string; tone: "success" | "warning" | "danger"; href: string };
  columns?: { title: string; links: { label: string; href: string }[] }[];
  className?: string;
}

const DEFAULT_COLUMNS = [
  {
    title: "Developers",
    links: [
      { label: "API reference", href: "#api" },
      { label: "Webhooks", href: "#webhooks" },
      { label: "SDKs", href: "#sdks" },
      { label: "Changelog", href: "#changelog" },
    ],
  },
  {
    title: "Product",
    links: [
      { label: "Invoicing", href: "#invoicing" },
      { label: "Payments", href: "#payments" },
      { label: "Pricing", href: "#pricing" },
    ],
  },
  {
    title: "Legal",
    links: [
      { label: "Privacy", href: "#privacy" },
      { label: "Terms", href: "#terms" },
      { label: "DPA", href: "#dpa" },
    ],
  },
];

const TONE = { success: "bg-da-success", warning: "bg-da-warning", danger: "bg-da-danger" } as const;

function LedgerlyMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 28 28" className={cn("size-7", className)}>
      <rect width="28" height="28" rx="7" fill="var(--da-primary)" />
      <path d="M8 8v12h12" stroke="var(--da-primary-fg)" strokeWidth="2.6" fill="none" strokeLinecap="round" />
      <path d="M13 15h7M13 11h7" stroke="var(--da-primary-fg)" strokeWidth="2.2" strokeLinecap="round" opacity=".7" />
    </svg>
  );
}

/** Developer-oriented dark footer (fg/bg inverted): brand, live system-status pill with pulsing dot, API version in mono, and three link columns. */
export function FooterStatus({
  brand = "Ledgerly",
  brandHref = "/",
  status = { label: "All systems operational", tone: "success", href: "#status" },
  columns = DEFAULT_COLUMNS,
  className,
}: FooterStatusProps) {
  return (
    <footer className={cn("bg-da-fg text-da-bg", className)}>
      <div className="da-container grid gap-10 py-14 md:grid-cols-[1.5fr_repeat(3,1fr)]">
        <div>
          <a href={brandHref} className="da-focus inline-flex items-center gap-2 rounded-da-sm font-da-display text-lg font-extrabold">
            <LedgerlyMark />
            {brand}
          </a>
          <a
            href={status.href}
            className="da-focus da-transition mt-6 flex w-fit items-center gap-2 rounded-da-pill border border-current/20 px-3 py-1.5 text-sm hover:border-current/50"
          >
            <span aria-hidden className="relative flex size-2">
              <span className={cn("absolute inset-0 animate-ping rounded-full opacity-60 motion-reduce:hidden", TONE[status.tone])} />
              <span className={cn("relative size-2 rounded-full", TONE[status.tone])} />
            </span>
            {status.label}
          </a>
          <p className="mt-4 font-da-mono text-xs opacity-70">API v2026-09 · 99.99% uptime (90d)</p>
        </div>
        {columns.map((c) => (
          <nav key={c.title} aria-label={c.title}>
            <h2 className="text-xs font-semibold tracking-da-label uppercase opacity-70">{c.title}</h2>
            <ul className="mt-4 space-y-2.5 text-sm">
              {c.links.map((l) => (
                <li key={l.label}>
                  <a href={l.href} className="da-focus rounded-da-sm opacity-90 hover:underline hover:opacity-100">
                    {l.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        ))}
      </div>
      <p className="border-t border-current/15 py-5 text-center text-xs opacity-70">© 2026 {brand}, Inc.</p>
    </footer>
  );
}

export default FooterStatus;