---
import type { FindsPost } from '../lib/backlinks';

interface Props {
  posts: FindsPost[];
  label?: string;
}
const { posts, label = 'Featured in' } = Astro.props;
---

{
  posts.length > 0 && (
    <p class="backlinks">
      <span class="label">{label}:</span>
      {posts.map((p, i) => (
        <>
          {i > 0 && <span class="sep">·</span>}
          <a href={`/finds/${p.id}/`}>{p.data.title}</a>
        </>
      ))}
    </p>
  )
}

<style>
  .backlinks {
    margin: 1.5rem 0 0;
    padding: 0.85rem 1rem;
    background: var(--rule);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--muted);
  }
  .backlinks .label {
    font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    font-weight: 600;
    color: var(--fg);
    margin-right: 0.4rem;
  }
  .backlinks .sep { margin: 0 0.45rem; color: var(--muted); }
  .backlinks a { color: var(--accent); }
</style>
