<script lang="ts">
	import type { Bezahlmethoden } from "#lib/client/prisma";

	export let name: string;
	export let icon: string;
	export let bezahlmethode: Bezahlmethoden;
	export let aktiveBezahlmethode: Bezahlmethoden;
</script>

<div>
	<input
		type="radio"
		data-cy={bezahlmethode}
		id={bezahlmethode}
		name="paymentType"
		on:change={() => (aktiveBezahlmethode = bezahlmethode)}
	/>

	<label for={bezahlmethode}>
		<div
			class="grid grid-rows-[1fr_20px] justify-items-center items-center cursor-pointer"
		>
			<img src={icon} alt={name} />
			{name}
		</div>
	</label>
</div>