---
import type { FindItem } from '../lib/find-items';
import SourceBadge from './SourceBadge.astro';

interface Props {
  item: FindItem;
}
const { item } = Astro.props;

function host(url: string) {
  try {
    return new URL(url).hostname.replace(/^www\./, '');
  } catch {
    return url;
  }
}
---

<a href={`/find/${item.id}/`} class="find-card">
  <div class="head">
    <span class="name">{item.data.name}</span>
    <SourceBadge source={item.data.source} />
  </div>
  {item.data.subtitle && <p class="subtitle">{item.data.subtitle}</p>}
  <p class="external">
    <span class="ext-label">→</span>
    <span class="host">{host(item.data.link)}</span>
  </p>
</a>

<style>
  .find-card {
    display: block;
    border-radius: 8px;
    border: 1px solid var(--rule);
    background: var(--bg);
    padding: 0.95rem 1.05rem 1rem;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .find-card:hover {
    text-decoration: none;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.18);
  }
  .find-card:hover .name { color: var(--accent); }

  .head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
  }
  .name {
    font-family: ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--fg);
    letter-spacing: -0.01em;
    transition: color 0.18s ease;
  }
  .subtitle {
    margin: 0 0 0.6rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.4;
    font-style: italic;
  }
  .external {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--muted);
    display: flex;
    gap: 0.35rem;
    align-items: baseline;
  }
  .ext-label { color: var(--accent); font-family: ui-sans-serif, system-ui, sans-serif; }
</style>
