import './blocks.css';

export interface VideoBlockProps {
  title?: string;
  subtitle?: string;
  videoUrl?: string;
  embedCode?: string;
  thumbnailUrl?: string;
  autoplay?: boolean;
  controls?: boolean;
  loop?: boolean;
  muted?: boolean;
  variant?: 'default' | 'fullwidth' | 'centered';
}

export function VideoBlock({ 
  title, 
  subtitle, 
  videoUrl,
  embedCode,
  thumbnailUrl,
  autoplay = false,
  controls = true,
  loop = false,
  muted = false,
  variant = 'default'
}: VideoBlockProps) {
  return (
    <section className={`shared-video shared-video--${variant}`}>
      {title && <h2 className="shared-video__title">{title}</h2>}
      {subtitle && <p className="shared-video__subtitle">{subtitle}</p>}
      <div className="shared-video__container">
        {embedCode ? (
          <div 
            className="shared-video__embed"
            dangerouslySetInnerHTML={{ __html: embedCode }}
          />
        ) : videoUrl ? (
          <video
            src={videoUrl}
            controls={controls}
            autoPlay={autoplay}
            loop={loop}
            muted={muted}
            poster={thumbnailUrl}
            className="shared-video__player"
          >
            Your browser does not support the video tag.
          </video>
        ) : null}
      </div>
    </section>
  );
}

