---
import { parseYouTubeId, youtubeEmbedUrl } from "./youtube.ts";

interface Props {
  /** A YouTube video id (e.g. `dQw4w9WgXcQ`). */
  id?: string;
  /** Start playback this many seconds in. */
  start?: number;
  /** Accessible title for the embedded player. */
  title?: string;
  /** A full YouTube URL to extract the id from, as an alternative to `id`. */
  url?: string;
}

const { id, start, title = "YouTube video player", url } = Astro.props;

const videoId = parseYouTubeId(id ?? url ?? "");
const src = videoId ? youtubeEmbedUrl(videoId, { start }) : null;
---

{
  src && (
    <div class="not-prose my-6 aspect-video overflow-hidden rounded-blume border border-border bg-muted/30">
      <iframe
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
        class="h-full w-full"
        loading="lazy"
        referrerpolicy="strict-origin-when-cross-origin"
        src={src}
        title={title}
      />
    </div>
  )
}