<script lang="ts">
	import { resolve } from '$app/paths';
	import logo from '$lib/assets/logo_governo_PE.png';
	import type { Snippet } from 'svelte';

	type HeaderProps = {
		left?: Snippet;
		right?: Snippet;
	};

	const { left, right }: HeaderProps = $props();
</script>

<header
	class="bg-base-200 border-base-100 sticky top-0 z-50 w-full border-b py-3 shadow-sm backdrop-blur-md transition-all duration-300"
>
	<div class=" flex h-16 w-full items-center justify-between px-4">
		<div class="flex items-center gap-3">
			{#if left}
				{@render left()}
			{/if}

			<a
				href={resolve('/')}
				class="group flex items-center gap-3 transition-transform hover:scale-[1.02]"
			>
				<img src={logo} alt="Logo Governo PE" class="h-10 w-auto object-contain drop-shadow-sm" />
				<div class="hidden flex-col sm:flex">
					<span class="text-primary text-2xl font-bold tracking-wider uppercase">SGSE</span>
					<span class="text-base-content -mt-1 text-lg leading-none font-extrabold tracking-tight"
						>Sistema de Gestão da Secretaria de Esportes</span
					>
				</div>
			</a>
		</div>

		<div class="flex items-center gap-2">
			<select
				class="select select-sm bg-base-100 border-base-300 w-40"
				aria-label="Selecionar tema"
				data-choose-theme
			>
				<option value="aqua">Aqua</option>
				<option value="sgse-blue">Azul</option>
				<option value="sgse-green">Verde</option>
				<option value="sgse-orange">Laranja</option>
				<option value="sgse-red">Vermelho</option>
				<option value="sgse-pink">Rosa</option>
				<option value="sgse-teal">Verde-água</option>
				<option value="sgse-corporate">Corporativo</option>
				<option value="light">Claro</option>
				<option value="dark">Escuro</option>
			</select>

			{#if right}
				{@render right()}
			{/if}
		</div>
	</div>
</header>
