---
/**
 * ============================================================
 * SVGarden — https://www.svgarden.dev
 * Author : Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File   : src/components/SnippetCard.astro
 * Desc   : Gallery card — lazy live preview, title, category + difficulty badges
 * ============================================================
 */
import LivePreview from './LivePreview.astro';

interface Props {
  snippet: {
    slug: string;
    title: string;
    category: string;
    difficulty: string;
    tags: string[];
    techniques: string[];
    code: string;
    created: string;
  };
}

const { snippet } = Astro.props;
// "New" badge for snippets created in the last 14 days (evaluated at build time)
const isNew = Date.now() - Date.parse(snippet.created) < 14 * 24 * 60 * 60 * 1000;
---

<article
  class="sg-card"
  data-slug={snippet.slug}
  data-category={snippet.category}
  data-difficulty={snippet.difficulty}
  data-techniques={snippet.techniques.join('|')}
>
  <LivePreview snippet={snippet} variant="card" />
  <div class="sg-card-body">
    <h2 class="sg-card-title">
      <a href={`/snippet/${snippet.slug}`}>{snippet.title}</a>
    </h2>
    <div class="sg-card-meta">
      {isNew && <span class="sg-badge sg-badge-new">New</span>}
      <span class="sg-badge sg-badge-cat">{snippet.category}</span>
      <span class={`sg-badge sg-badge-${snippet.difficulty}`}>{snippet.difficulty}</span>
      {snippet.tags.slice(0, 3).map((t) => <span class="sg-badge">{t}</span>)}
    </div>
  </div>
</article>

<script>
  // Lazy-render previews when cards approach the viewport, and keep the
  // preview background in sync with the site theme. Runs once per page.
  const setBg = (frame: HTMLIFrameElement) => {
    const dark = document.documentElement.dataset.theme === 'dark';
    frame.contentDocument?.body?.style.setProperty('--sg-preview-bg', dark ? '#111113' : '#ffffff');
  };

  const frames = [...document.querySelectorAll<HTMLIFrameElement>('iframe[data-sg-lazy-srcdoc]')];

  const io = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) {
        if (!entry.isIntersecting) continue;
        const frame = entry.target as HTMLIFrameElement;
        frame.addEventListener('load', () => setBg(frame), { once: true });
        frame.srcdoc = frame.dataset.sgLazySrcdoc!;
        frame.removeAttribute('data-sg-lazy-srcdoc');
        io.unobserve(frame);
      }
    },
    { rootMargin: '300px' }
  );
  frames.forEach((f) => io.observe(f));

  new MutationObserver(() => {
    document.querySelectorAll<HTMLIFrameElement>('.sg-card-preview iframe').forEach(setBg);
  }).observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
</script>