<script lang="ts">
	import { currentArxletTitle } from '$lib/stores/settings';
	import AppIcon from './AppIcon.svelte';
	import LiquidGlass from './LiquidGlass.svelte';

	let {
		title,
		subtitle,
		icon,
		iconColor,
		iconForegroundColor,
		iconStrokeColor
	}: {
		title: string;
		subtitle: string;
		icon: string;
		iconColor: string;
		iconForegroundColor?: string;
		iconStrokeColor?: string;
	} = $props();
</script>

<div class="sticky top-0 z-90">
	<LiquidGlass>
		<div class="bg-base-300/70 border-b-4 border-primary/50 w-full mx-auto px-16 py-4">
			<div class="flex items-center gap-3">
				<AppIcon
					{icon}
					color={iconColor}
					foregroundColor={iconForegroundColor}
					strokeColor={iconStrokeColor}
				/>
				<div>
					<h1 class="text-2xl font-semibold text-base-content">
						{title}
						{#if $currentArxletTitle}
							- {$currentArxletTitle}
						{/if}
					</h1>
					<p class="text-base-content/70 text-sm">
						{subtitle}
					</p>
				</div>
			</div>
		</div>
	</LiquidGlass>
</div>
