<script lang="ts">
	import { IconSolid } from 'svelte-heros-v2';
	import { createEventDispatcher } from 'svelte';
	import { env } from '$env/dynamic/public';

	const dispatch = createEventDispatcher();

	let startDayOptions: Intl.DateTimeFormatOptions = {
		day: '2-digit',
		month: 'long',
		year: 'numeric'
	};
	let startTimeOptions: Intl.DateTimeFormatOptions = {
		hour: '2-digit',
		minute: '2-digit'
	};
</script>

<div class="flex items-center h-12 mb-2">
	<button class="sm:absolute btn btn-sm btn-square" on:click={() => dispatch('close')}>
		<IconSolid name="chevron-left-solid" />
	</button>
	<h1 class="text-center text-xl sm:text-3xl m-auto">Registrierung erfolgreich</h1>
</div>
<p>
	<b>Du hast dich erfolgreich für Craftattack 6 registriert</b>. Spielstart ist am {new Date(
		env.PUBLIC_START_DATE
	).toLocaleString('de-DE', startDayOptions)} um {new Date(env.PUBLIC_START_DATE).toLocaleString(
		'de-DE',
		startTimeOptions
	)} Uhr.
</p>
