<script lang="ts">
	export let bereich: string;
	export let title: string;
	export let bullets: [string, boolean][];
</script>

<div class="">
	<strong>{bereich} - {title}</strong>
	<div class="mt-4 mb-6">
		{#each bullets as [bullet, check]}
			<div
				class="bullets grid grid-cols-[1fr_40px] items-center border-b-[1px] border-b-black/10"
			>
				<span>{@html bullet}</span>
				<div
					class="justify-self-end"
					class:check
					class:check-no={!check}
				>
					{check ? "✔" : "✘"}
				</div>
			</div>
		{/each}
	</div>
</div>

<style lang="postcss">
	.check {
		@apply self-center font-bold text-green-700;
	}
	.check-no {
		@apply self-center font-bold text-red-700;
	}
</style>
