<script lang="ts">
	import { onMount } from 'svelte';
	import { _ } from 'svelte-i18n';
	import Header from '$lib/components/Header.svelte';

	let username = '';

	onMount(() => {
		username = localStorage.getItem('user_display_name') || 'Gast';
	});
</script>
<Header/>
<main class="p-8 text-gunmetal-950 dark:text-timberwolf">
	<h1 class="mb-4 text-3xl font-bold">{$_('dashboard.title')}</h1>
	<p class="mb-6">{$_('dashboard.welcome')}, {username}!</p>
	<ul class="space-y-4">
		<li class="rounded bg-white dark:bg-gunmetal border p-4 shadow">{$_('dashboard.sample_vehicle')}</li>
		<li class="rounded bg-white dark:bg-gunmetal border p-4 shadow">
			{$_('dashboard.next_service', { values: { date: '01.01.2026' } })}
		</li>
	</ul>
</main>
