<script lang="ts">
	import { resolve } from '$app/paths';
	import SystemMonitorCardLocal from '$lib/components/ti/SystemMonitorCardLocal.svelte';
	import { Monitor, ArrowLeft } from 'lucide-svelte';
</script>

<div class="container mx-auto max-w-7xl px-4 py-6">
	<!-- Header -->
	<div class="mb-8 flex items-center justify-between">
		<div class="flex items-center gap-4">
			<div class="from-primary/20 to-primary/10 rounded-2xl bg-linear-to-br p-3">
				<Monitor class="text-primary h-10 w-10" strokeWidth={2} />
			</div>
			<div>
				<h1 class="text-primary text-4xl font-bold">
					Monitoramento SGSE - Sistema de Gerenciamento de Secretaria
				</h1>
				<p class="text-base-content/60 mt-2 text-lg">
					Sistema de monitoramento técnico em tempo real
				</p>
			</div>
		</div>
		<a href={resolve('/ti')} class="btn">
			<ArrowLeft class="h-5 w-5" strokeWidth={2} />
			Voltar
		</a>
	</div>

	<!-- Card de Monitoramento -->
	<SystemMonitorCardLocal />
</div>
