---
import { tagPath } from '../lib/site';

interface Props {
  tags: readonly string[];
  currentTag?: string;
  limit?: number;
  counts?: Record<string, number>;
}

const { tags, currentTag, limit, counts } = Astro.props;

const visibleTags = typeof limit === 'number' ? tags.slice(0, limit) : tags;
const remaining =
  typeof limit === 'number' && tags.length > limit ? tags.length - limit : 0;
---

<ul class="tag-list">
  {
    visibleTags.map((tag) => (
      <li>
        <a href={tagPath(tag)} aria-current={tag === currentTag ? 'true' : undefined}>
          {tag}
          {counts && counts[tag] !== undefined && (
            <span class="tag-count">{counts[tag]}</span>
          )}
        </a>
      </li>
    ))
  }
  {
    remaining > 0 && (
      <li>
        <a href="/tags/" class="tag-more">
          +{remaining} more
        </a>
      </li>
    )
  }
</ul>
