import React from 'react';

interface VideoEmbedProps {
  url?: string;
  title?: string;
  aspectRatio?: '16/9' | '4/3' | '1/1';
}

export function VideoEmbed({ url = '', title = 'Video', aspectRatio = '16/9' }: VideoEmbedProps) {
  if (!url) return null;

  // Detect YouTube
  const ytMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/);
  // Detect Vimeo
  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);

  let embedUrl = url;
  if (ytMatch) {
    embedUrl = `https://www.youtube.com/embed/${ytMatch[1]}`;
  } else if (vimeoMatch) {
    embedUrl = `https://player.vimeo.com/video/${vimeoMatch[1]}`;
  }

  const isIframe = ytMatch || vimeoMatch;

  return (
    <section className="w-full py-8">
      <div className="container max-w-4xl mx-auto px-4">
        <div className="relative rounded-xl overflow-hidden shadow-md" style={{ aspectRatio }}>
          {isIframe ? (
            <iframe
              src={embedUrl}
              title={title}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
              className="absolute inset-0 w-full h-full"
            />
          ) : (
            <video
              src={url}
              controls
              playsInline
              className="absolute inset-0 w-full h-full object-cover"
            />
          )}
        </div>
      </div>
    </section>
  );
}
