"use client";
import styles from "./events.module.css"
import { useSchedule } from "@/app/schedule/context";
import { ScheduleEvent } from "@/app/schedule/types";

function EventInfo(props: { event: ScheduleEvent }) {
	return <section className={styles.event}>
		<h3>{props.event.name}</h3>
		<p>{props.event.description ?? "No description provided"}</p>
		<h4>Timeslots</h4>
		<ul>
			{props.event.slots.map(slot => <li key={slot.id}>
				{slot.start} - {slot.end}
			</li>)}
		</ul>
	</section>
}

export function Events() {
	const schedule = useSchedule();
	return <>
		{schedule!.events.map(event => <EventInfo event={event} key={event.id}/>)}
	</>;
}