Footer Minimal

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

export interface FooterMinimalProps {
  brand?: string;
  year?: number;
  links?: { label: string; href: string }[];
  status?: { label: string; href: string } | null;
  className?: string;
}

/** Single-row footer: brand + copyright, a few links and a live status pill. Stacks on mobile. */
export function FooterMinimal({
  brand = "Tracewise",
  year = 2026,
  links = [
    { label: "Privacy", href: "#privacy" },
    { label: "Terms", href: "#terms" },
    { label: "Security", href: "#security" },
    { label: "Docs", href: "#docs" },
  ],
  status = { label: "All systems normal", href: "#status" },
  className,
}: FooterMinimalProps) {
  return (
    <footer className={cn("border-t border-da-border bg-da-bg text-da-fg", className)}>
      <div className="da-container flex flex-col gap-4 py-6 text-[13px] sm:flex-row sm:items-center">
        <p className="flex items-center gap-2 text-da-muted-fg">
          <span aria-hidden className="size-3 rounded-[3px] bg-da-fg" />
          <span className="font-medium text-da-fg">{brand}</span> © {year}
        </p>
        <nav aria-label="Footer" className="sm:ml-auto">
          <ul className="flex flex-wrap gap-x-5 gap-y-2">
            {links.map((l) => (
              <li key={l.href}>
                <a href={l.href} className="da-focus da-transition rounded-da-sm text-da-muted-fg hover:text-da-fg">
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
        </nav>
        {status && (
          <a
            href={status.href}
            className="da-focus da-transition da-stroke inline-flex w-fit items-center gap-2 rounded-da-pill px-2.5 py-1 text-[12px] text-da-muted-fg hover:text-da-fg"
          >
            <span aria-hidden className="size-1.5 rounded-full bg-da-success" />
            {status.label}
          </a>
        )}
      </div>
    </footer>
  );
}

export default FooterMinimal;