<script lang="ts">
	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="p-3.5 border rounded-lg" disabled={!removable && quantity == 1} on:click={() => {
			quantity--
		}}>-</button>
		<button class="p-3.5 border rounded-lg">{quantity}</button>
		<button class="p-3.5 border rounded-lg" disabled={quantity <= maxQuantity} on:click={() => quantity++}>+</button>
	</div>
</div>