<script lang="ts">
	export let steps: string[] = [
		"Gebäudedaten",
		"Kundendaten",
		"Kaufbestätigung",
	];
	export let stepsalign: string[] = [
		"justify-self-start",
		"justify-self-center",
		"justify-self-end",
	];

	export let active: number;
	export let progress: number = active / (steps.length - 1) * 100;
	export let ausweisart;
	export let anliegen;

	import { PRICES } from "#lib/constants.js";
	import { Enums } from "#lib/client/prisma.js";
</script>

<div id="progress-box" class="order-1 sm:order-2 w-full box relative px-4 pt-3 sm:py-3 text-center self-stretch">
<h1 class="text-secondary [font-size:_clamp(26px,1vw,18px)] m-0 font-bold sm:font-normal">{anliegen}</h1>
<h2 class="text-primary [font-size:_clamp(18px,1.5vw,24px)]">{ausweisart} {PRICES[ausweisart][Enums.AusweisTyp.Standard]} €</h2>

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


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

</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;
		}
		.phaseTitel{@apply [font-size:_clamp(12px,1vw,18px)]}
	}

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

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

