import type { TransitionConfig } from "svelte/transition";

interface RevealParams {
	duration: number;
	easing: (t: number) => number;
}

export const revealWidth = (
	node: Element,
	{ duration, easing }: RevealParams
): TransitionConfig => {
	const width = node.getBoundingClientRect().width;
	return {
		duration,
		easing,
		css: (t) => `overflow: clip; width: ${t * width}px; min-width: 0`
	};
};

export const revealHeight = (
	node: Element,
	{ duration, easing }: RevealParams
): TransitionConfig => {
	const height = node.getBoundingClientRect().height;
	return {
		duration,
		easing,
		css: (t) => `overflow: clip; height: ${t * height}px; min-height: 0; opacity: ${t}`
	};
};