// src/components/NewsPanel.jsx
import React from 'react';

// เปลี่ยน videoStreamUrl เป็น youtubeVideoId
export default function NewsPanel({ title, content, youtubeVideoId, isActive }) {
    const panelClasses = `
        card w-80 shadow-2xl z-10 p-6
        transition-all duration-500 ease-in-out transform
        ${isActive ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-full pointer-events-none'}
        ${isActive ? 'glass bg-base-200 text-base-content' : ''}
    `;

    return (
        <div className={panelClasses}>
            <h2 className="card-title text-xl font-bold mb-2 uppercase">{title}</h2>
            <p className="text-sm mb-4">{content}</p>

            {/* ส่วนสำหรับ YouTube Video Embed */}
            {youtubeVideoId && ( // ตรวจสอบว่ามี youtubeVideoId ส่งมาหรือไม่
                <div className="mt-4 aspect-video w-full"> {/* aspect-video ให้สัดส่วน 16:9 */}
                    <iframe
                        className="w-full h-full rounded-lg"
                        src={`https://www.youtube.com/embed/${youtubeVideoId}?autoplay=0&modestbranding=1&rel=0`}
                        title="YouTube video player"
                        frameBorder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowFullScreen
                    ></iframe>
                </div>
            )}
            {/* หากไม่มี youtubeVideoId และต้องการแสดง placeholder เดิม ให้เพิ่มเงื่อนไขนี้ */}
            {!youtubeVideoId && ( // ถ้าไม่มี YouTube ID ก็แสดง placeholder เก่า
                <div className="bg-base-300 h-24 flex items-center justify-center rounded-lg text-base-content text-sm border border-base-content/20">
                    [NO VIDEO STREAM AVAILABLE]
                </div>
            )}
        </div>
    );
}