/**
 * Shared tag list with overflow indicator.
 *
 * Renders up to `max` tag pills (default 4), plus a "+N more" pill
 * when the list exceeds the limit. Used across cards and detail pages
 * to keep tag displays compact and consistent (R027).
 */

interface TagListProps {
  tags: string[];
  max?: number;
  /** Extra CSS class added to each pill (e.g. "pill--tag") */
  pillClass?: string;
}

export default function TagList({ tags, max = 4, pillClass }: TagListProps) {
  const visible = tags.slice(0, max);
  const overflow = tags.length - max;
  const cls = pillClass ? `pill ${pillClass}` : "pill";

  return (
    <>
      {visible.map((tag) => (
        <span key={tag} className={cls}>
          {tag}
        </span>
      ))}
      {overflow > 0 && (
        <span className="pill pill--overflow">+{overflow} more</span>
      )}
    </>
  );
}
