<script lang="ts">
	interface Props {
		text: string;
		position?: 'top' | 'bottom' | 'left' | 'right';
		children?: any;
	}

	let { text, position = 'top', children }: Props = $props();

	const positionClass = {
		top: 'tooltip-top',
		bottom: 'tooltip-bottom',
		left: 'tooltip-left',
		right: 'tooltip-right'
	};
</script>

<div class="tooltip {positionClass[position]}" data-tip={text}>
	{@render children?.()}
</div>
