<script>
	import Select from "svelte-select";

	export let items, selectedSoftware;

	function handleSelect(event) {
		console.log(event);
		selectedSoftware = event.detail;
	}

	function handleClear() {
		selectedSoftware = "null";
	}
	console.log(items);
</script>

<form>
	<label for="food">Software:</label>
	<Select
		id="food"
		items="{items}"
		on:select="{handleSelect}"
		on:clear="{handleClear}"
	/>
</form>

{#if selectedSoftware}
	<p>Selected software is: {selectedSoftware.label}</p>
{/if}

<style>
	form {
		max-width: 500px;
		background: #f4f4f4;
		padding: 20px;
		border-radius: 4px;
		color: black;
	}

	label {
		margin: 0 0 10px;
	}
</style>