---
interface Props {
  image: string;
  alt: string;
  videoUrl: string;
  videoTitle: string;
}
const { image, alt, videoUrl, videoTitle } = Astro.props;
---
<button class="video-card" data-video-url={videoUrl} aria-haspopup="dialog" aria-label={`Watch video: ${videoTitle}`}>
  <img src={`/assets/images/${image}`} alt={alt} />
  <span aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" fill="currentColor" aria-hidden="true">
      <path d="M21 12.88L37.5 22.4A3 3 0 0 1 37.5 27.6L21 37.12A3 3 0 0 1 16.5 34.52L16.5 15.48A3 3 0 0 1 21 12.88Z" />
    </svg>
  </span>
</button>
<dialog class="video-dialog">
  <div class="video-dialog-inner">
    <button class="video-dialog-close" aria-label="Close video" autofocus>✕</button>
    <div class="video-dialog-frame">
      <iframe title={videoTitle} allowfullscreen allow="autoplay; encrypted-media"></iframe>
    </div>
  </div>
</dialog>

<script>
  document.querySelectorAll('button.video-card[data-video-url]').forEach((card) => {
    const dialog = card.nextElementSibling as HTMLDialogElement;
    const iframe = dialog.querySelector('iframe') as HTMLIFrameElement;
    const base = card.getAttribute('data-video-url')!;
    const sep = base.includes('?') ? '&' : '?';

    const closeBtn = dialog.querySelector('.video-dialog-close') as HTMLButtonElement;
    closeBtn.addEventListener('click', () => dialog.close());

    card.addEventListener('click', () => {
      iframe.src = `${base}${sep}autoplay=1`;
      dialog.showModal();
    });

    dialog.addEventListener('close', () => {
      iframe.src = '';
    });

    // Close on backdrop click
    dialog.addEventListener('click', (e) => {
      if (e.target === dialog) dialog.close();
    });
  });
</script>

<style>
  .video-card { background: none; border: none; cursor: pointer; display: block; padding: 0; position: relative; }
  .video-card img { width: 100%; }
  .video-card span { align-items: center; background: var(--color-accent); border-radius: 50%; color: white; display: flex; height: 64px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 64px; z-index: 1; }
  .video-card::before, .video-card::after { animation-duration: 3s; animation-iteration-count: infinite; animation-name: video-ripple; animation-timing-function: cubic-bezier(.65, 0, .34, 1); border: 8px solid var(--color-accent); border-radius: 50%; content: ""; height: 64px; left: 50%; opacity: 0; position: absolute; top: 50%; width: 64px; }
  .video-card::before { animation-delay: .5s; }
  .video-dialog { background: none; border: none; box-sizing: border-box; max-width: min(90vw, 900px); padding: 1rem 1rem 0 0; width: 100%; }
  .video-dialog::backdrop { background: rgba(0, 0, 0, .85); }
  .video-dialog-inner { position: relative; }
  .video-dialog-frame { aspect-ratio: 16 / 9; width: 100%; }
  .video-dialog-frame iframe { border: none; height: 100%; width: 100%; }
  .video-dialog-close { background: white; border: none; border-radius: 50%; cursor: pointer; font-size: 1rem; height: 2rem; line-height: 2rem; position: absolute; right: -1rem; top: -1rem; width: 2rem; }
  @keyframes video-ripple { 0% { opacity: 1; transform: translate(-50%, -50%) scale3d(.75, .75, 1); } to { opacity: 0; transform: translate(-50%, -50%) scale3d(1.5, 1.5, 1); } }
</style>