{{ $articleType := .Params.type | default "life" }}
{{ $typeConfig := .Site.Params.articleTypes }}
{{ $typeData := index $typeConfig $articleType }}

<a
  href="{{ .RelPermalink }}"
  class="block p-4 md:p-6 border border-border/30 rounded hover:border-accent/50 hover:bg-surface/30 transition-all duration-200 group"
>
  <!-- Pinned badge -->
  {{ if .Params.pinned }}
  <div class="mb-3 inline-flex items-center gap-1 px-2 py-1 rounded text-sm font-semibold" style="color: {{ .Site.Params.secondaryAccent }};">
    📌 PINNED
  </div>
  {{ end }}

  <!-- Title -->
  <h3 class="text-lg font-semibold group-hover:text-accent transition-colors mb-3">
    {{ .Title }}
  </h3>

  <!-- Metadata -->
  <div class="flex flex-wrap items-center gap-3 text-sm text-text-dim">
    <!-- Publish date -->
    <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
      {{ .PublishDate.Format "Jan 2, 2006" }}
    </time>

    <!-- Type badge -->
    {{ if $typeData }}
    <span
      class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium transition-colors type-{{ $articleType }}"
    >
      {{ i18n $articleType }}
    </span>
    {{ end }}
  </div>
</a>