<script>
	import Header from '../components/Header.svelte';
	import '../app.css';

	let year = new Date().getFullYear();
	let version = null;

	if (typeof window !== 'undefined') {
		fetch(`${import.meta.env.VITE_STOCKS_HOST}/actuator/info`)
			.then(res => res.json())
			.then(data => {
				version = data?.git?.commit?.id ?? null;
			})
			.catch(err => {
				console.error('Failed to fetch version:', err);
			});
	}
</script>

<div
	class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100"
>
	<Header />

	<main class="flex-1 flex flex-col px-4 py-6 w-full max-w-4xl mx-auto box-border">
		<slot />
	</main>

	<footer
		class="flex flex-col items-center justify-center py-3 text-sm text-gray-400 dark:text-gray-600"
	>
		<p>© {year} Lhamacorp</p>
		{#if version}
			<p>Version: {version}</p>
		{/if}
	</footer>
</div>
