<script lang="ts">
	import { createSelectionContext } from './context';

	const { selected } = createSelectionContext();
</script>

<div class="dropdown">
	{#if !$selected}
		<button class="dropbtn">Placeholder</button>
	{:else}
		<div class="spacer"></div>
	{/if}

	<div class="dropdown-content">
		<slot />
	</div>
</div>

<style>
	.dropbtn {
		color: white;
		border: none;
		cursor: pointer;
		background: transparent;
		text-decoration: underline;
	}

	.dropdown {
		position: relative;
		display: inline-block;
	}

	.dropdown-content {
		background: #fff;
		position: absolute;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
		z-index: 1;
		max-height: 0px;
		overflow: hidden;
	}

	.dropdown:hover .dropdown-content {
		display: block;
		max-height: 400px;
	}
</style>
