
<script lang="ts">
	export let TitelName: string;
	export let BulletPoints: [string, boolean][];
</script>

<div class="border rounded-xl mb-6">
	<div class="flex flex-row w-full bg-secondary rounded-t-3xl pl-5 pt-1 pb-1">
			<h3 class="text-white">{TitelName}</h3>
	</div>

	<div class="bg-white">
		<div class="white">
			{#each BulletPoints as [point]}
			<div class="services">
				<ul class="custom-list pl-6 space-y-2"><li>{point}</li></ul>
			</div>
			{/each}
		</div>
	</div>
</div>

<style lang="scss">
	.white {
		@apply text-center text-black p-6;
	}

	.services {
		@apply text-start py-2;
	}
	.services:not(:last-child) {
		@apply border-b-[0px] border-gray-300;
	}

	.custom-list {
  @apply list-none pl-6; /* Entfernt Standardpunkte */

  li {
    @apply relative text-gray-700 text-lg list-none; /* Entfernt Standardpunkte */

    &::before {
      @apply absolute left-[-1.5rem] top-[0.4rem] w-3 h-3 bg-primary content-[""];
      /* Quadrat mit `w-2`, `h-2`, orange Hintergrund */
    }
  }
}
</style>