---
import { sourceSlug } from '../lib/sources';

interface Props {
  source: string;
  prefix?: string;
}
const { source, prefix = 'via' } = Astro.props;
const href = `/sources/#${sourceSlug(source)}`;
---

<span class="source-badge">
  {prefix} <a href={href} class="name">{source}</a>
</span>

<style>
  .source-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .source-badge .name {
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
  }
  .source-badge .name:hover {
    text-decoration: underline;
  }
</style>