<script lang="ts">
	export let title: string;
	export let tooltip: string = "";
</script>

<div class="flex flex-row justify-between mb-2">
	<label class="text-base-content">{title}</label>
	<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help">
		<img
			src="/images/question-mark.png"
			alt="?"
			class="w-[20px] h-[20px]"
		/>
		<div class="tooltip">
			<slot></slot>
			<div id="arrow" class="invisible absolute h-3 w-3 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
		</div>
	</div>
</div>

<style>
	label {
		@apply text-base font-medium;
	}

	.tooltip {
		@apply absolute -right-1 max-w-[350px] w-max break-words invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
	}

	.tooltip-opener:hover .tooltip {
		@apply visible opacity-100;
	}
</style>