---
/**
 * CategoryList.astro
 * ---------------------------------------------------------------------------
 * Renders a media kind's full library grouped by category: for each group a
 * small subheader (the category name + item count), then a wrapping row of
 * pills (title + optional status). Reuses the existing `.pill` + `<Icon>`
 * pattern already established on the old reading page.
 *
 * Pass the output of `getGrouped(kind)` directly. When the list is empty the
 * caller should fall back to `<Placeholder>` (see the pages); this component
 * assumes at least one group.
 */
import Icon from '@components/Icon.astro';
import type { MediaGroup } from '@lib/media';

interface Props {
  groups: MediaGroup[];
  /** mdi icon shown before each pill. */
  pillIcon?: string;
}

const { groups, pillIcon = 'play-circle' } = Astro.props;
---

<div class="flex flex-col gap-8">
  {
    groups.map((group) => (
      <div class="flex flex-col gap-3">
        <div class="flex items-baseline gap-2.5">
          <h3
            class="font-display text-lg"
            style="color: var(--color-text);"
          >
            {group.category}
          </h3>
          <span
            class="font-eyebrow text-[0.65rem] uppercase tracking-[0.18em]"
            style="color: var(--color-text-muted);"
          >
            {group.items.length}
          </span>
        </div>
        <ul class="flex flex-wrap gap-2.5">
          {group.items.map((item) => (
            <li
              class="pill inline-flex items-center gap-1.5 text-sm"
              title={item.note ?? ''}
            >
              <Icon name={pillIcon} class="h-3.5 w-3.5" />
              <span>{item.title}</span>
              {item.status && (
                <span
                  class="font-eyebrow text-[0.6rem] uppercase tracking-[0.14em]"
                  style="color: var(--color-accent);"
                >
                  {item.status}
                </span>
              )}
              {item.year && (
                <span
                  class="font-eyebrow text-[0.6rem] tracking-[0.04em]"
                  style="color: var(--color-text-muted);"
                >
                  {item.year}
                </span>
              )}
            </li>
          ))}
        </ul>
      </div>
    ))
  }
</div>