---
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';
import type { Lang } from '../i18n/routes';
import { getDict } from '../i18n';
interface Props { lang: Lang; id: string; title: string; poster: ImageMetadata }
const { lang, id, title, poster } = Astro.props;
const t = getDict(lang);
---
<div class="yt">
  <Image src={poster} alt="" width={960} height={540} />
  <button type="button" class="play" data-yt={id} data-yt-title={title} aria-label={`${t.common.playVideo}: ${title}`}>
    <svg width="72" height="72" viewBox="0 0 72 72" aria-hidden="true"><circle cx="36" cy="36" r="36" fill="var(--ochre)"/><path d="M29 24l20 12-20 12z" fill="var(--ink)"/></svg>
  </button>
</div>

<style>
  .yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
  .yt img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
  .play { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; }
  .play svg { transition: transform .2s var(--ease); }
  .play:hover svg { transform: scale(1.08); }
  .yt :global(iframe) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
</style>

<script>
  document.querySelectorAll<HTMLButtonElement>('[data-yt]').forEach((b) =>
    b.addEventListener('click', () => {
      const f = document.createElement('iframe');
      f.src = `https://www.youtube-nocookie.com/embed/${b.dataset.yt}?autoplay=1&rel=0`;
      f.title = b.dataset.ytTitle ?? 'Video';
      f.allow = 'accelerometer; autoplay; encrypted-media; picture-in-picture';
      f.allowFullscreen = true;
      b.closest('.yt')!.replaceChildren(f);
    }),
  );
</script>