---
/**
 * One row of a typographic index.
 *
 * Used by the work list, the projects page, and anywhere else a list of
 * linked things needs the house treatment. Cards are the default on most
 * sites and they are wrong here — this is a quiet, scannable index.
 *
 * Styling lives in styles.css under @layer components (.ca-entry / .ca-tick)
 * so a change to hover behaviour is one edit, not one per page.
 */
const { href, title, meta, summary, tags = [], first = false } = Astro.props;
---

<a href={href} class:list={["ca-entry", first && "border-t border-border"]}>
  <span class="ca-tick" aria-hidden="true">&mdash;</span>

  <span class="font-serif text-2xl leading-snug tracking-tight">{title}</span>

  {
    meta && (
      <span class="font-mono text-xs tracking-wide whitespace-nowrap text-[var(--ca-ink-4)] tabular-nums">
        {meta}
      </span>
    )
  }

  {
    summary && (
      <span class="col-start-2 mt-2 max-w-[56ch] text-sm text-muted-foreground">
        {summary}
      </span>
    )
  }

  {
    tags.length > 0 && (
      <span class="col-start-2 mt-3 flex flex-wrap gap-2">
        {tags.map((tag) => (
          <span class="rounded-[var(--radius)] border border-border px-2 py-0.5 font-mono text-[0.7rem] tracking-wide text-[var(--ca-ink-4)]">
            {tag}
          </span>
        ))}
      </span>
    )
  }
</a>
