import { CalendarIcon } from "@/icons/jsx/calendarIcon";
import { useEffect, useState } from "preact/hooks"

export function upcomingEvent(props: { event: UpcomingEvent }) {
    const [ isOpen, setIsOpen ] = useState<boolean>(false);

    useEffect(() => {
        console.log(isOpen);
    }, [ isOpen ])

    return (
        <div>
            <div className="hover:cursor-pointer text-indigo-400 underline" onClick={() => setIsOpen(true)}>{"Read more >>"}</div>

            { isOpen && (
                <div
                    onClick={() => setIsOpen(false)}
                    className="fixed inset-0 flex items-center justify-center bg-[#000000bb] shadow-md z-999999999999"
                >
                    <div
                        onClick={(e) => e.stopPropagation()}
                        className="relative bg-white rounded-2xl shadow-xl max-w-md w-full p-6 animate-in fade-in zoom-in-95"
                    >
                        <div className="flex flex-col gap-1.5">
                            <h4 className="text-2xl font-semibold">{props.event.title}</h4>
                            <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
                                <CalendarIcon width={24} height={24} />

                                { props.event.endDate !== null ? (
                                    <p>{props.event.startDate} - {props.event.endDate}</p>
                                ) : (
                                    <p>{props.event.startDate}</p>
                                ) }
                            </div>

                            <div className="mt-3">
                                { props.event.description }
                            </div>
                        </div>
                    </div>
                </div>
            ) }
        </div>
    )
}