// src/components/PopUpDetail.jsx
import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';

export default function PopUpDetail({ point, onClose }) {
    const modalRef = useRef();

    useEffect(() => {
        if (point) {
            gsap.fromTo(modalRef.current,
                { opacity: 0, scale: 0.8 },
                { opacity: 1, scale: 1, duration: 0.5, ease: "back.out(1.7)" }
            );
        }
    }, [point]);

    if (!point) return null;

    return (
        // DaisyUI modal component
        <div
            ref={modalRef}
            className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 z-50 pointer-events-auto"
            onClick={onClose} // คลิกที่พื้นหลังเพื่อปิด
        >
            <div
                className="modal-box bg-base-300 text-base-content p-6 rounded-box shadow-2xl w-96"
                onClick={(e) => e.stopPropagation()} // หยุด event propagation ไม่ให้ปิดเมื่อคลิกใน modal
            >
                <h3 className="font-bold text-lg text-primary mb-2">{point.name} Details</h3>
                <p className="py-2 text-sm">Type: {point.type === 'news' ? 'News Region' : 'Statistics Region'}</p>
                <div className="mt-4">
                    <h4 className="font-semibold text-accent mb-1">Recent Updates:</h4>
                    {point.news && point.news.length > 0 ? (
                        <ul className="list-disc list-inside text-xs">
                            {point.news.map((item, index) => (
                                <li key={index}>{item}</li>
                            ))}
                        </ul>
                    ) : (
                        <p className="text-xs text-gray-500">No specific updates available.</p>
                    )}
                </div>
                <div className="modal-action mt-6">
                    <button className="btn btn-sm btn-primary" onClick={onClose}>Close</button>
                </div>
            </div>
        </div>
    );
}