<script lang="ts">
  import { getBlockLayoutClasses } from "../../lib/block-layout";
  import type { YoutubeVideoBlockData } from "../../lib/block-types";

  let { block }: { block: YoutubeVideoBlockData } = $props();

  const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
  const embedUrl = $derived(
    block.youtubeId
      ? `https://www.youtube-nocookie.com/embed/${encodeURIComponent(block.youtubeId)}?rel=0${block.params ? `&${String(block.params).replace(/^&/, "")}` : ""}`
      : null,
  );
</script>

<div class={layoutClasses} data-block-type="youtube_video" data-block-slug={block._slug}>
  {#if block.youtubeId}
    <div class="aspect-video w-full overflow-hidden rounded-sm bg-stein-100">
      <iframe
        title={block.title ?? "YouTube-Video"}
        src={embedUrl}
        class="h-full w-full border-0"
        loading="lazy"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
      ></iframe>
    </div>
    {#if block.description}
      <div class="mt-1 text-sm text-stein-600">{block.description}</div>
    {/if}
  {:else}
    <div class="text-sm text-stein-500">YouTube-Video-ID fehlt.</div>
  {/if}
</div>
