'use client';

interface LiveStreamSectionProps {
  show: boolean;
  onClose: () => void;
}

export default function LiveStreamSection({ show, onClose }: LiveStreamSectionProps) {
  if (!show) return null;

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-8 md:pt-32 pb-8">
      <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-8">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center space-x-3">
            <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
            <h2 className="text-2xl font-bold text-[#004B87]">Canlı Yayın</h2>
          </div>
          <button 
            onClick={onClose}
            className="text-gray-500 hover:text-red-500 transition-colors"
          >
            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        
        {/* YouTube Video Embed */}
        <div className="relative w-full" style={{paddingBottom: '56.25%'}}>
          <iframe
            className="absolute top-0 left-0 w-full h-full rounded-lg"
            src="https://www.youtube.com/embed/b9q88QDEcKg?autoplay=1"
            title="Canlı Yayın"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          ></iframe>
        </div>
        
        <p className="mt-4 text-gray-600 text-sm">
          A2 Metro Hattı İnşaat Çalışmaları - Canlı Yayın
        </p>
      </div>
    </div>
  );
}