---
/**
 * A post's page chips. A roundup can link a hundred pages, so past the first
 * few the rest are counted; the post itself links every one.
 */
import Chip from "@gk/ui/components/Chip.astro";
import type { PageLink } from "../../lib/blog.ts";

interface Props {
  links: PageLink[];
  max?: number;
}
const { links, max = 5 } = Astro.props;
const shown = links.length > max + 1 ? links.slice(0, max) : links;
const more = links.length - shown.length;
---
{shown.map((l) => <Chip href={l.href}>{l.label}</Chip>)}
{more > 0 && <span class="more">and {more} more</span>}

<style>
  .more {
    font-size: 12px;
    color: var(--gk-muted);
    white-space: nowrap;
  }
</style>