---
import CalendarIcon from '@/icons/CalendarIcon.astro';
import { Image } from 'astro:assets';
import { upcomingEvent as UpcomingEvent } from './subcomponents/UpcomingEvent';
import { markdownToHtml } from '@/lib/markdown';

interface Props {
    upcomingEvents: UpcomingEventsComponent;
}

const upcomingEvents = Astro.props.upcomingEvents;
---

<div id={`upcomingevents-${upcomingEvents.id}`} class="flex flex-col justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18">
    <h1 class="text-5xl font-bold">Upcoming Events</h1>
    
    <div class="flex flex-col items-start gap-7 w-full">
        { upcomingEvents.events.map((event) => (
            <div id={event.id} class="flex lg:flex-row flex-col items-center justify-center lg:gap-y-8 gap-y-5 gap-x-18">
                <div class="lg:w-[50%] w-full">
                    <Image
                        src={event.thumbnail.url}
                        width={event.thumbnail.width}
                        height={event.thumbnail.height}
                        class={`aspect-15/9 rounded-2xl shadow-md object-cover`}
                        alt=""
                    />
                </div>
                <div class="flex flex-col gap-2.5 lg:w-[40%] w-full">
                    <h3 class="text-3xl font-semibold">{event.title}</h3>
                    <div class="flex flex-row items-center gap-1.5 text-neutral-900">
                        <CalendarIcon width={24} height={24} />
                        { event.endDate !== null ? (
                        <p>{event.startDate} - {event.endDate}</p>
                        ) : (
                            <p>{event.startDate}</p>
                        ) }
                    </div>
                    <div class="mt-3.5">
                        <UpcomingEvent
                            client:load
                            event={{
                                title: event.title,
                                description: markdownToHtml(event.description),
                                startDate: event.startDate,
                                endDate: event.endDate
                            }} 
                        />
                    </div>
                </div>
            </div>
        )) }
    </div>
</div>