---
interface Props {
	percent: number;
	target: number;
	labelCurrent?: string;
	labelTarget?: string;
}

const { percent, target, labelCurrent = 'Self-Hosted', labelTarget = 'Ziel' } = Astro.props;
---

<div class="mx-auto max-w-3xl py-12" id="independence-bar">
	<div class="mb-4 flex items-end justify-between">
		<div>
			<span class="text-5xl font-bold text-primary">{percent}%</span>
			<span class="ml-2 text-lg text-text-secondary">{labelCurrent}</span>
		</div>
		<div class="text-right">
			<span class="text-lg text-text-muted">{labelTarget}: {target}%+</span>
		</div>
	</div>

	<div class="relative h-6 overflow-hidden rounded-full bg-border">
		<!-- Current progress -->
		<div
			class="independence-fill absolute inset-y-0 left-0 rounded-full bg-primary transition-all duration-1000 ease-out"
			style={`width: 0%`}
			data-target-width={`${percent}%`}
		>
		</div>

		<!-- Target marker -->
		<div
			class="absolute inset-y-0 border-l-2 border-dashed border-text-muted"
			style={`left: ${target}%`}
		>
		</div>
	</div>

	<div class="mt-4 flex gap-6 text-sm text-text-muted">
		<div class="flex items-center gap-2">
			<span class="inline-block h-3 w-3 rounded-full bg-green-500"></span>
			Self-Hosted (14)
		</div>
		<div class="flex items-center gap-2">
			<span class="inline-block h-3 w-3 rounded-full bg-amber-500"></span>
			Cloud, ersetzbar (5)
		</div>
		<div class="flex items-center gap-2">
			<span class="inline-block h-3 w-3 rounded-full bg-red-500"></span>
			Cloud, unvermeidbar (2)
		</div>
	</div>
</div>

<script>
	const observer = new IntersectionObserver(
		(entries) => {
			entries.forEach((entry) => {
				if (entry.isIntersecting) {
					const fill = entry.target.querySelector('.independence-fill') as HTMLElement;
					if (fill) {
						fill.style.width = fill.dataset.targetWidth || '75%';
					}
					observer.unobserve(entry.target);
				}
			});
		},
		{ threshold: 0.3 }
	);

	const bar = document.getElementById('independence-bar');
	if (bar) observer.observe(bar);
</script>
