<script lang="ts">
	import { onMount } from 'svelte';
	import { slide } from 'svelte/transition';

	let isNotLondon = $state(false);
	let londonZone = $state('Greenwich Mean Time');

	onMount(() => {
		const userTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
		isNotLondon = userTZ !== 'Europe/London';

		const parts = new Intl.DateTimeFormat('en-GB', {
			timeZone: 'Europe/London',
			timeZoneName: 'long'
		}).formatToParts(new Date());

		londonZone = parts.find((p) => p.type === 'timeZoneName')?.value || 'UK Time';
	});
</script>

{#if isNotLondon}
	<div transition:slide={{ duration: 300 }} class="tzWarn">
		<p class="tzText">
			All times are shown in <strong>{londonZone}</strong>
		</p>
	</div>
{/if}

<style>
	.tzWarn {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 1rem 0 0 0;
	}

	.tzText {
		width: 80%;
		text-align: center;
		margin: auto;
		font-family: 'URW Gothic', sans-serif;
		font-size: 1.2rem;
	}
</style>
