import React from 'react';

interface YouTubeEmbedProps {
  videoId: string;
  title?: string;
  className?: string;
  aspectRatio?: string;
  style?: 'default' | 'minimal' | 'rounded' | 'flat';
}

export const YouTubeEmbed: React.FC<YouTubeEmbedProps> = ({
  videoId,
  title = "YouTube Video",
  className = "",
  aspectRatio = "56.25%",
  style = "default"
}) => {
  const embedUrl = `https://www.youtube.com/embed/${videoId}`;

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