Footer Minimal

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

export interface FooterMinimalProps {
  brand?: string;
  brandHref?: string;
  links?: { label: string; href: string }[];
  className?: string;
}

function FrameMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className={cn("size-6 shrink-0", className)}>
      <rect x="1" y="1" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" />
      <path d="M7 1v22M1 7h22" stroke="currentColor" strokeWidth="2" />
      <rect x="15" y="15" width="4" height="4" fill="var(--da-accent)" />
    </svg>
  );
}

/** One-line footer: logo mark, copyright, and links separated by slashes — all in mono caps on a single hairline row; wraps gracefully on mobile. */
export function FooterMinimal({
  brand = "Frame",
  brandHref = "/",
  links = [
    { label: "Templates", href: "#templates" },
    { label: "Pricing", href: "#pricing" },
    { label: "Privacy", href: "#privacy" },
    { label: "Terms", href: "#terms" },
  ],
  className,
}: FooterMinimalProps) {
  return (
    <footer className={cn("border-t border-da-border bg-da-bg text-da-fg", className)}>
      <div className="da-container flex flex-wrap items-center justify-between gap-4 py-6 font-da-mono text-[11px] tracking-da-label uppercase">
        <a href={brandHref} className="da-focus flex items-center gap-2 rounded-da-sm">
          <FrameMark className="size-4" />© 2026 {brand}
        </a>
        <nav aria-label="Footer">
          <ul className="flex flex-wrap items-center gap-x-2 gap-y-1 text-da-muted-fg">
            {links.map((l, i) => (
              <li key={l.label} className="flex items-center gap-2">
                {i > 0 && <span aria-hidden>/</span>}
                <a href={l.href} className="da-focus rounded-da-sm hover:text-da-fg">
                  {l.label}
                </a>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </footer>
  );
}

export default FooterMinimal;