<script lang="ts" module>
	export type DropdownAlignment = {
		vertical?: 'top' | 'bottom';
		horizontal?: 'left' | 'right';
		content?: 'start' | 'center' | 'end';
	};
</script>

<script lang="ts">
	import type { Snippet } from 'svelte';

	type Props = {
		alignment?: DropdownAlignment;
		children: Snippet;
		hover?: boolean;
		open?: boolean;
		title: Snippet;
	};

	let { alignment, children, hover, open, title }: Props = $props();
</script>

<div
	class="dropdown"
	class:dropdown-start={alignment?.content === 'start'}
	class:dropdown-center={alignment?.content === 'center'}
	class:dropdown-end={alignment?.content === 'end'}
	class:dropdown-top={alignment?.vertical === 'top'}
	class:dropdown-bottom={alignment?.vertical === 'bottom'}
	class:dropdown-left={alignment?.horizontal === 'left'}
	class:dropdown-right={alignment?.horizontal === 'right'}
	class:dropdown-hover={hover}
	class:dropdown-open={open}
>
	<div tabindex="0" role="button" class="btn m-1">{@render title()}</div>
	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
	<div tabindex="0" class="dropdown-content z-0">
		{@render children?.()}
	</div>
</div>