Footer minimal

import * as React from "react";
import { cn } from "@/lib/utils";

export type FooterMinimalLink = { label: string; href: string };

type FooterMinimalProps = Omit<React.ComponentProps<"footer">, "children"> & {
  /** Copyright or one short line, on the left. */
  legal: string;
  /** A few small links, on the right. */
  links?: FooterMinimalLink[];
};

/** A one row footer: a legal line on the left, a few links on the right. Wraps on a phone. */
export function FooterMinimal({ legal, links = [], className, ...props }: FooterMinimalProps) {
  return (
    <footer
      data-slot="footer-minimal"
      className={cn("w-full border-t text-xs text-muted-foreground", className)}
      {...props}
    >
      <div className="mx-auto flex max-w-6xl flex-col gap-3 px-6 py-5 sm:flex-row sm:items-center sm:justify-between md:px-8">
        <p className="m-0">{legal}</p>
        {links.length > 0 && (
          <nav aria-label="Footer">
            <ul className="m-0 flex list-none flex-wrap items-center gap-x-4 gap-y-2 p-0">
              {links.map((link) => (
                <li key={`${link.href}-${link.label}`}>
                  <a
                    href={link.href}
                    className="rounded-sm transition-colors duration-100 ease-out outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        )}
      </div>
    </footer>
  );
}