---
import type { CollectionEntry } from "astro:content";

interface Props {
  post: CollectionEntry<"blog">;
  categoryTitleMap?: Map<string, string>;
  seriesCountMap?: Map<string, number>;
  activeTagId?: string;
}

const { post, categoryTitleMap, seriesCountMap, activeTagId } = Astro.props;

function capitalize(s: string) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

function formatDate(date: Date) {
  return date.toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
}

const showCategory = categoryTitleMap && post.data.category;
const hasMeta =
  showCategory || post.data.tags.length > 0 || !!post.data.seriesParent;
---

<li class="item">
  <a href={`/blog/${post.id}`} class="item__link">
    <h2 class="item__title">{post.data.title}</h2>
    <span class="item__date">{formatDate(post.data.publishDate)}</span>
  </a>
  {post.data.description && <p class="item__desc">{post.data.description}</p>}
  {
    hasMeta && (
      <div class="item__meta">
        {post.data.seriesParent && (
          <a href={`/blog/${post.data.seriesParent}`} class="series-badge">
            Series with {seriesCountMap?.get(post.data.seriesParent) ?? "?"} Parts
          </a>
        )}
        {showCategory && (
          <a
            href={`/blog/category/${post.data.category!.id}`}
            class="category"
          >
            in{" "}
            {categoryTitleMap!.get(post.data.category!.id) ??
              post.data.category!.id}
          </a>
        )}
        {post.data.tags.map((t) => (
          <a
            href={`/tags/${t}`}
            class={`tag${t === activeTagId ? " tag--active" : ""}`}
          >
            {capitalize(t)}
          </a>
        ))}
      </div>
    )
  }
</li>

<style>
  .item {
    border-bottom: 1px solid #e0e0de;
    padding-bottom: 2rem;
  }

  .item:last-child {
    border-bottom: none;
  }

  .item__link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.4rem;
  }

  .item__link:hover .item__title {
    color: var(--accent);
  }

  .item__title {
    font-weight: 500;
    margin: 0;
    transition: color 0.15s;
  }

  .item__date {
    font-size: 0.85rem;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .item__desc {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }

  .item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .series-badge {
    font-size: 0.75rem;
    color: #888;
    text-decoration: none;
    padding-right: 0.5rem;
    margin-right: 0.1rem;
    border-right: 1px solid #ccc;
  }

  .series-badge:hover {
    color: var(--accent);
  }

  .category {
    font-size: 0.75rem;
    color: #888;
    text-decoration: none;
    padding-right: 0.5rem;
    margin-right: 0.1rem;
    border-right: 1px solid #ccc;
  }

  .category:hover {
    color: var(--accent);
  }

  .tag {
    font-size: 0.75rem;
    color: #666;
    background: #e8e8e6;
    padding: 0.15em 0.55em;
    border-radius: 3px;
    text-decoration: none;
  }

  .tag:hover {
    background: var(--accent);
    color: #fff;
  }

  .tag--active {
    background: var(--accent);
    color: #fff;
  }

  @media (max-width: 640px) {
    .item__link {
      flex-direction: column;
      gap: 0.2rem;
    }
  }
</style>
