<script lang="ts">
    export let art: string;
	export let price: number;
</script>
	
<div id ="Card{art}Sidebar"
	class="hidden lg:grid box card grid-cols-1 justify-items-center">



	<h2>{art}</h2>

	
	<div >

	{#if art=="Verbrauchsausweis Gewerbe"}
	<img src="/images/right-sidebar/gewerbegebaeude.svg" alt="Verbrauchsausweis Gewerbe"/>
	
	{:else if art=="Bedarfsausweis Gewerbe"}
	<img src="/images/right-sidebar/gewerbegebaeude.svg" alt="Bedarfsausweis Gewerbe"/>
	
	{:else if art=="Verbrauchsausweis Wohnen"}
	<img src="/images/right-sidebar/wohngebaeude.svg" alt="Verbrauchsausweis Wohnen"/>

	{:else if art=="Bedarfsausweis Wohnen"}
	<img src="/images/right-sidebar/wohngebaeude.svg" alt="Bedarfsausweis Wohnen"/>
	
	{/if}

	<div class="promo tracking-tighter text-[1.6rem] text-right text-gray-700 pr-32 -mt-5 mb-2">ab {price}€</div>

	</div>
	{#if art=="Verbrauchsausweis Gewerbe"}
	<a href="../energieausweis-erstellen/verbrauchsausweis-gewerbe/" class="link">{art} jetzt&nbsp;erstellen</a>

	{:else if art=="Bedarfsausweis Gewerbe"}
	<a href="../angebot-anfragen/bedarfsausweis-gewerbe-anfragen" class="link">{art} jetzt&nbsp;anfragen</a>

	{:else if art=="Verbrauchsausweis Wohnen"}
	<a href="../energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" class="link">{art} jetzt&nbsp;erstellen</a>

	{:else if art=="Bedarfsausweis Wohnen"}
	<a href="../energieausweis-erstellen/bedarfsausweis-wohngebaeude/" class="link">{art} jetzt&nbsp;erstellen</a>
	{/if}
	
	</div>

<style lang="postcss">

.link{@apply w-full text-white font-[700] bg-secondary rounded-md text-center px-3 py-1 no-underline [font-size:_clamp(8px,1vw,16px)] hover:bg-primary}

</style>
