<template>
	<div class="stock-variant-list">
		<div v-if="variants.length > 0" class="stock-variant-list__variants">
			<StockVariantRow
				v-for="variant in variants"
				:key="variant.id"
				:variant="variant"
				:stock-item-id="stockItemId"
				@update="$emit('update-variant', $event)"
				@delete="$emit('delete-variant', $event)"
			/>
		</div>
		<div v-else class="stock-variant-list__empty">
			Keine Varianten vorhanden
		</div>
	</div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import StockVariantRow from './StockVariantRow.vue'

defineProps({
	variants: {
		type: Array,
		default: () => [],
	},
	stockItemId: {
		type: Number,
		required: true,
	},
})

defineEmits(['update-variant', 'delete-variant'])
</script>

<style scoped>
.stock-variant-list__variants {
	margin-bottom: 8px;
}

.stock-variant-list__empty {
	color: var(--color-text-maxcontrast);
	font-style: italic;
	padding: 8px;
}
</style>
