<script>import MenuItem from './MenuItem.svelte';
export let items;
export let optionGroupChildren = 'items';
export let optionGroupLabel = 'label';
export let optionLabel = 'label';
export let isGroupItems = false;
export let value = '';
</script>

{#each items as item, index}
	<slot {item} {isGroupItems}>
		<MenuItem {...item} isHeader={!!item.items} active={value == item.value} {index} on:click>
			{item[isGroupItems ? optionGroupLabel : optionLabel]}
		</MenuItem>
		{#if item[optionGroupChildren]}
			<svelte:self
				on:click
				items={item[optionGroupChildren]}
				{optionGroupChildren}
				{optionGroupLabel}
				{optionLabel}
				isGroupItems
				{value}
			/>
		{/if}
	</slot>
{/each}

<style></style>
