<script lang="ts">
	export let steps: string[] = [
		"Gebäudedaten",
		"Kundendaten",
		"Kaufbestätigung",
	];
	export let active: number;
	export let progress: number = active / (steps.length - 1) * 100;
</script>

<div class="grid grid-cols-3 self-start justify-between">
	<div class="col-span-3 relative">
		<div
			class="w-[calc(100%-5rem)] ml-[2.5rem] absolute mt-[0.5rem] bg-gray-200 h-3 rounded-lg"
		>
			<div
				class="bg-green-600 left-0 h-3 absolute"
				style={`width: ${progress}%;`}
			></div>
		</div>
	</div>


	{#each steps as step, i}
		<div class="phase">
			<div class="point" class:active={i === active}>{i + 1}</div>
			<div>{step}</div>
		</div>
	{/each}
</div>



<style lang="postcss">
	.phase {
		@apply grid grid-cols-1 items-center justify-items-center z-10;
		.point {
			@apply rounded-full w-8 h-8 text-white font-bold bg-gray-300 text-center pt-1 ring-white ring-4;
		}
		.active {
			@apply bg-secondary;
		}
	}

	:nth-child(1 of .phase) {
		@apply justify-self-start;
	}

	.phase:last-of-type {
		@apply justify-self-end;
	}
</style>

