<svelte:options accessors={true} />

<script>
	const types = {
		mdi: {
			size: 24,
			viewbox: "0 0 24 24",
		},
		"simple-icons": {
			size: 24,
			viewbox: "0 0 24 24",
		},
		default: {
			size: 0,
			viewbox: "0 0 0 0",
		},
	};

	export let type = null;
	export let path;
	export let size = null;
	export let viewbox = null;
	export let flip = "none";
	export let rotate = 0;
	export let padding = 0;

	// Reactive statements to set default values based on type
	$: defaults = types[type] || types.default;
	$: sizeValue = size || defaults.size;
	$: viewboxValue = viewbox || defaults.viewbox;
	$: sx = ["both", "horizontal"].includes(flip) ? "-1" : "1";
	$: sy = ["both", "vertical"].includes(flip) ? "-1" : "1";
	$: r = isNaN(rotate) ? rotate : rotate + "deg";

	export let svgElement; // To expose the reference
</script>

<svg
	bind:this={svgElement}
	width={sizeValue}
	height="auto"
	viewBox={viewboxValue}
	style="--sx: {sx}; --sy: {sy}; --r: {r}; padding: {padding}px"
	{...$$restProps}
>
	<path d={path} />
</svg>

<style>
	svg {
		transform: rotate(var(--r, 0deg)) scale(var(--sx, 1), var(--sy, 1));
	}

	path {
		fill: currentColor;
	}
</style>
