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

  const t = useTranslate();
  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 ?? t(T.youtube_title_fallback)}
        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">{t(T.youtube_missing)}</div>
  {/if}
</div>
