---
// src/components/Video.astro - SIMPLE responsive video component
export interface Props {
  src: string;
  title?: string;
  controls?: boolean;
  autoplay?: boolean;
  muted?: boolean;
  loop?: boolean;
  aspectRatio?: '16:9' | '4:3' | '1:1';
  preload?: 'none' | 'metadata' | 'auto';
}

const {
  src,
  title = 'Video',
  controls = true,
  autoplay = false,
  muted = false,
  loop = false,
  aspectRatio = '16:9',
  preload = 'metadata'
} = Astro.props;

const aspectClass = `aspect-${aspectRatio.replace(':', '-')}`;
---

<div class={`video-container ${aspectClass}`}>
  <video 
    src={src}
    controls={controls}
    autoplay={autoplay}
    muted={muted}
    loop={loop}
    preload={preload}
    style="width: 100%; height: 100%;"
    data-video-title={title}
  >
    <p>Your browser does not support the video element.</p>
  </video>
  {title !== 'Video' && (
    <div class="video-metadata">
      <div class="video-title">{title}</div>
    </div>
  )}
</div>