<template>
	<section class="event">
		<h3>{{ event.name }}</h3>
		<p>{{ event.description ?? "No description provided" }}</p>
		<h4>Timeslots</h4>
		<ul>
			<li v-for="slot in event.slots" :key="slot.id">
				{{ slot.start }} - {{ slot.end }}
			</li>
		</ul>
	</section>
</template>

<script lang="ts" setup>
import type { ScheduleEvent } from '~/shared/types/schedule';

defineProps<{
	event: ScheduleEvent
}>()
</script>

<style scoped>
.event {
	background: color-mix(in oklab, var(--background), grey 20%);
	padding: 0.5rem;
	border-radius: 0.5rem;
}
.event h3 {
	margin: 0;
}
.event + .event {
	margin-block-start: 0.5rem;
}
</style>
