---
/**
 * ============================================================
 * SVGarden — https://www.svgarden.dev
 * Author : Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File   : src/components/CodeBlock.astro
 * Desc   : Shiki-highlighted code panel with Copy + Download buttons
 * ============================================================
 */
import { Code } from 'astro:components';

interface Props {
  code: string; // displayed AND copied — includes the attribution header
  label: string; // e.g. snippets/loaders/spinner-dash.html
  downloadName?: string; // e.g. spinner-dash.html — omits the Download button if absent
}

const { code, label, downloadName } = Astro.props;
---

<div class="sg-panel sg-codeblock" data-sg-codeblock>
  <div class="sg-panel-bar">
    <strong>Code</strong>
    <span>{label}</span>
    <span class="sg-spacer"></span>
    {downloadName && (
      <button class="sg-btn sg-btn-sm" type="button" data-sg-download={downloadName}>
        Download .html
      </button>
    )}
    <button class="sg-btn sg-btn-sm sg-btn-primary" type="button" data-sg-copy>
      Copy code
    </button>
  </div>
  <Code code={code} lang="html" themes={{ light: 'github-light-high-contrast', dark: 'github-dark' }} />
  <script type="text/plain" data-sg-copy-source>{code}</script>
</div>

<style is:global>
  /* Dual-theme Shiki: swap to the dark palette when the site is dark */
  .astro-code { background: #ffffff !important; }
  [data-theme='dark'] .astro-code,
  [data-theme='dark'] .astro-code span {
    color: var(--shiki-dark) !important;
    background-color: transparent !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
  }
  [data-theme='dark'] .astro-code { background-color: #16161a !important; }
</style>

<script>
  // Copy + download. The current text lives in the data-sg-copy-source island;
  // the Customizer script rewrites it when values change.
  for (const block of document.querySelectorAll('[data-sg-codeblock]')) {
    const source = () => block.querySelector('[data-sg-copy-source]')?.textContent ?? '';

    const copyBtn = block.querySelector<HTMLButtonElement>('[data-sg-copy]');
    copyBtn?.addEventListener('click', async () => {
      await navigator.clipboard.writeText(source());
      copyBtn.classList.add('sg-btn-done');
      copyBtn.textContent = 'Copied ✓';
      setTimeout(() => {
        copyBtn.classList.remove('sg-btn-done');
        copyBtn.textContent = 'Copy code';
      }, 1600);
    });

    const dlBtn = block.querySelector<HTMLButtonElement>('[data-sg-download]');
    dlBtn?.addEventListener('click', () => {
      const blob = new Blob([source()], { type: 'text/html' });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = dlBtn.dataset.sgDownload!;
      a.click();
      URL.revokeObjectURL(a.href);
    });
  }
</script>