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

	let {
		x1,
		x2,
		y1,
		y2,
		x,
		y,
		width,
		height,
		children
	}: {
		x1?: number;
		x2?: number;
		y1?: number;
		y2?: number;
		x?: number;
		y?: number;
		width?: number;
		height?: number;
		children: Snippet;
	} = $props();

	$effect(() => {
		if (x1 !== undefined && x2 !== undefined && y1 !== undefined && y2 !== undefined) {
			const xMin = Math.min(x1, x2);
			const yMin = Math.min(y1, y2);

			x = xMin;
			width = Math.abs(x1 - x2);
			y = yMin;
			height = Math.abs(y1 - y2);
		}
	});
</script>

<div class="absolute" style="left: {x}px; top: {y}px; width: {width}px; height: {height}px;">
	{@render children()}
</div>
