---
// YouTubeEmbed.astro - Build-time component with full styling control
interface Props {
  videoId: string;
  title?: string;
  className?: string;
  aspectRatio?: string;
  style?: 'default' | 'minimal' | 'rounded' | 'flat';
}

const { 
  videoId, 
  title = "YouTube Video",
  className = "",
  aspectRatio = "56.25%",
  style = "default"
} = Astro.props;

const embedUrl = `https://www.youtube.com/embed/${videoId}`;
---

<div class={`not-prose my-6 ${className}`} data-style={style}>
  <div class="bg-white border border-slate-200/80 rounded-xl overflow-hidden transition-all duration-200 hover:border-slate-300/80 p-1" style={`padding-bottom: calc(${aspectRatio} - 0.5rem); position: relative; height: 0; margin-top: 0.25rem; margin-bottom: 0.25rem;`}>
    <iframe
      src={embedUrl}
      title={title}
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
      class="absolute top-1 left-1 w-[calc(100%-0.5rem)] h-[calc(100%-0.5rem)] border-none rounded-md"
    />
  </div>
</div>