---
/**
 * ============================================================
 * SVGarden — https://www.svgarden.dev
 * Author : Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File   : src/components/LivePreview.astro
 * Desc   : Sandboxed iframe preview — lazy for cards, eager + bg toggle for detail
 * ============================================================
 */
import { previewDocument } from '../lib/snippets.mjs';

interface Props {
  snippet: { slug: string; title: string; code: string };
  variant?: 'card' | 'full';
}

const { snippet, variant = 'card' } = Astro.props;
const doc = previewDocument(snippet, { padding: variant === 'card' ? '0.75rem' : '2rem' });
---

{
  variant === 'card' ? (
    <div class="sg-card-preview">
      <iframe
        title={`Live preview: ${snippet.title}`}
        data-sg-lazy-srcdoc={doc}
        sandbox="allow-scripts allow-same-origin"
        loading="lazy"
        tabindex="-1"
        style="pointer-events: none;"
      />
    </div>
  ) : (
    <div class="sg-panel">
      <div class="sg-panel-bar">
        <strong>Live preview</strong>
        <span class="sg-spacer" />
        <div class="sg-bg-toggle" role="group" aria-label="Preview background">
          <button type="button" data-sg-bg="#ffffff" aria-pressed="true">Light</button>
          <button type="button" data-sg-bg="#111113" aria-pressed="false">Dark</button>
        </div>
      </div>
      <div class="sg-preview-stage">
        <iframe id="sg-preview-frame" title={`Live preview: ${snippet.title}`} srcdoc={doc} sandbox="allow-scripts allow-same-origin" />
      </div>
    </div>
  )
}