<script lang="ts">
  /**
   * ResultsCounter component - Shows item count with optional search context
   *
   * @req: UR-007 - Navigate media in library
   * @req: DR-007 - Library browsing screens
   */

  interface Props {
    count: number;
    itemType: string; // "genre", "album", "track", "artist", "movie", "show", etc.
    searchQuery?: string;
    className?: string;
  }

  let { count, itemType, searchQuery = "", className = "" }: Props = $props();

  const itemTypeLabels: Record<string, { singular: string; plural: string }> = {
    genre: { singular: "genre", plural: "genres" },
    album: { singular: "album", plural: "albums" },
    track: { singular: "track", plural: "tracks" },
    artist: { singular: "artist", plural: "artists" },
    movie: { singular: "movie", plural: "movies" },
    show: { singular: "show", plural: "shows" },
    playlist: { singular: "playlist", plural: "playlists" },
  };

  const labels = $derived(itemTypeLabels[itemType] || { singular: itemType, plural: `${itemType}s` });
  const label = $derived(count === 1 ? labels.singular : labels.plural);
</script>

<p class={`text-sm text-gray-400 ${className}`}>
  {count}
  {label}
  {#if searchQuery}
    matching "{searchQuery}"
  {/if}
</p>
