import Timetable from "@/ui/timetable"
import styles from "./page.module.css"
import { ScheduleEvent, events, locations } from "./events"

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 default function schedule() {
	return <main className={styles.schedule}>
		<h1>Schedule & Events</h1>
		<p>
			Study carefully, we only hold these events once a year.
		</p>
		<h2>Schedule</h2>
		<Timetable events={events} />
		<h2>Events</h2>
		{events.map(event => <EventInfo event={event} key={event.id}/>)}
		<h2>Locations</h2>
		<ul>
			{locations.map(location => <li key={location.id}>
				<h3>{location.name}</h3>
				{location.description ?? "No description provided"}
			</li>)}
		</ul>
	</main>
}