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


{#if empfehlung=="ja"}
<div class="empfehlung">Empfehlung</div>
{/if}
		<h2 class="titel sm:mb-2">{name}</h2>


			<div class="sumCent">
				<div class="variante">{variant}</div>
				<img
					class="image"
					{src}
					{alt}
				/>
				<div class="justify-self-start">
					<p class="price">
							ab {price} €					
					</p>
				</div>

			</div>

			<div class="sumCent buttoncols">	
				<a
					href="{href_buy}"
					class="buttoncol">{cta}</a
				>
	
				<a
					href="{href_overview}"
					class="buttoncol">Produkt-Übersicht</a
				>
	
				</div>

			<div class="sumRows forServices">
			
				{#each services as [service, check]}
				<div class="services">
					<span>{@html service}</span>
					<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
				</div>
				{/each}
	
			</div>


<style lang="postcss">



.sumCent{@apply justify-self-center col-span-2}
.sumRows{@apply hidden sm:grid grid-rows-subgrid row-span-5 items-center}
.forServices{@apply grid-rows-subgrid row-span-5 items-center col-span-2 justify-center px-6}

.image{@apply w-[75%] mx-auto
	md:w-[75%] md:pl-0}

.buttoncols{@apply grid grid-cols-1 gap-x-4 w-full mb-4
md:grid-cols-2 md:w-[auto]}

.buttoncol{@apply mt-2 md:mt-0 text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
hover:bg-primary hover:text-white}


	.price{@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-4 text-nowrap;
				font-family: "Antique Olive Compact bold";}



	.titel {@apply col-span-2 text-center [font-size:_clamp(20px,2.5vw,28px)]}
	.empfehlung{@apply -mt-4 absolute justify-self-end rounded-md bg-red-700 text-white w-fit h-fit px-2 py-1 rotate-1 text-[0.65rem] ring-4 ring-white mr-6}
	.variante {
		@apply w-fit italic col-span-2 -mt-2 -mb-4 text-[1rem] text-[#222222] justify-self-start ring-2 ring-primary rounded-md pl-[4px] pr-[6px] py-[0px];
	}

	.services {
		@apply hidden text-start py-1 md:grid grid-rows-subgrid row-span-1 items-center  md:grid-cols-[1fr_50px]
	}
	.services:not(:last-child) {
		@apply border-b-[1px] border-gray-200;
	}
	.check {
		@apply justify-self-end self-center font-bold text-green-700;
	}
	.check-no {
		@apply justify-self-end self-center font-bold text-red-700;
	}

</style>
