<script lang="ts">
	export let price: number;
	export let name: string;
	export let variant: string;
	export let services: [string, boolean][];
	export let href: string;
	export let src: string;
	export let alt: string;
	export let empfehlung: string;
</script>




		<div class="relative">
		<h2 class="titel">{name}</h2>
		{#if empfehlung=="ja"}
		<div class="empfehlung bg-red-700 text-[0.75rem] text-white absolute right-12 top-1 px-2 py-1 rounded-full rotate-[5deg]">Empfelung</div>
		{/if}
		</div>

		<hr class="mb-2" />

		<div class="titelPic grid grid-cols-[25%_1fr_25%] items-center mb-0 mt-0 w-full">
			
			<div class="">
				<img
					class="w-[100%] justify-self-start"
					{src}
					{alt}
				/>
			</div>
			
			<div class="justify-self-start">
				<p class="tracking-tighter text-[1.75rem] text-gray-700 pl-3">
					<span class="[font-family:Antique_Olive_Compact_bold]">
						ab {price} €
					</span> 
				</p>
			</div>

			<div class="variante justify-self-end">{variant}</div>

			

		</div>





		<div class="white grid grid-rows-subgrid row-span-6 relative">
			{#each services as [service, check]}
			<div class="services grid grid-cols-[content-fit_1fr] items-center">
				<span>{@html service}</span>
				<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
			</div>
			{/each}
		</div>




		<div class="w-full grid grid-cols-2 gap-2">
			<a
				{href}
				class="w-full justify-self-center text-center text-white bg-secondary rounded-md px-3 py-1 mt-2 no-underline
                    hover:bg-primary
            ">jetzt online erstellen</a
			>

			<a
				{href}
				class="w-full justify-self-center text-center text-secondary ring-1 ring-secondary/50 bg-white rounded-md px-3 py-1 mt-2 no-underline 
                    hover:bg-secondary/15
            ">zur Produktübersicht</a
			>
		</div>








<style lang="postcss">
	.titel {@apply [font-size:_clamp(14px,1.5vw,18px)] 
		pr-12 text-left
	}
	.variante {
		@apply -mt-2 text-xl w-fit text-black justify-self-end;
	}

	.services {
		@apply text-start py-1 grid grid-cols-[1fr_minmax(10px,50px)];
	}
	.services:not(:last-child) {
		@apply border-b-[1px] border-gray-200;
	}
	.check {
		@apply justify-self-end font-bold text-green-700;
	}
	.check-no {
		@apply justify-self-end font-bold text-red-700;
	}
</style>
