Footer

"use client";

import { Footer, Button, Link } from "@pimolu/react";

const hugeColumns = [
  {
    title: "Product",
    links: [
      { label: "Components", href: "/docs" },
      { label: "Themes", href: "/docs" },
      { label: "Design tokens", href: "/docs" },
      { label: "Changelog", href: "/docs" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "Documentation", href: "/docs" },
      { label: "Examples", href: "/docs" },
      { label: "GitHub", href: "https://github.com", external: true },
      { label: "Figma kit", href: "https://figma.com", external: true },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About", href: "/docs" },
      { label: "Careers", href: "/docs" },
      { label: "Contact", href: "/docs" },
    ],
  },
];

export function DemoExample() {
  return (
    <Footer
      brand={<span
        className="flex items-center gap-3 no-underline text-inherit"
      >
        <span
          className="grid place-items-center size-9 rounded-md bg-primary text-[var(--pimolu-primary-foreground)]"
        >P</span>

        <span>
          <strong className="block">Pimolu UI</strong>
          <span className="text-xs text-muted">Design system</span>
        </span>
      </span>}
      description={(
        "One design system shared by the web, the playground and native " +
        "applications. Built on tokens, plain CSS and accessible React " +
        "primitives."
      )}
      actions={<Button
        size="sm"
        appearance="outline"
      >
        Star on GitHub
      </Button>}
      columns={hugeColumns}
      copyright="© 2026 Pimolu UI. MIT licensed."
      bottom={<>
        <Link href="/docs" variant="muted" underline="hover">Privacy</Link>
        <Link href="/docs" variant="muted" underline="hover">Terms</Link>
        <Link href="/docs" variant="muted" underline="hover">Status</Link>
      </>}
    />
  );
}