<script lang="ts">
	import { get_current_component } from "svelte/internal";

	const component = get_current_component();

	export let image: string;
	export let name: string;
	export let description: string;
	export let price: number;
	export let quantity: number;

	export let removable: boolean = true;
	export let maxQuantity: number = Infinity;
</script>

<div class="flex flex-row justify-between items-center">
	<div class="flex flex-row gap-4">
		<img src={image} class="w-24" alt="">
		<div class="flex flex-col">
			<h4 class="font-semibold">{name}</h4>
			<span class="opacity-75">{description}</span>
			<span class="font-semibold text-sm">{price * quantity}€</span>
		</div>
	</div>
	<div class="join">
		<button class="btn btn-sm join-item" disabled={!removable && quantity == 1} on:click={() => {
			quantity--

			if ((quantity == 0) && removable) {
				component.$destroy();
			}
		}}>-</button>
		<button class="btn btn-sm join-item btn-ghost">{quantity}</button>
		<button class="btn btn-sm join-item" disabled={quantity <= maxQuantity} on:click={() => quantity++}>+</button>
	</div>
</div>