<script lang="ts">
	import { currentSeed } from '$lib/stores/settings';
	import { onMount } from 'svelte';
	import type { ClassValue } from 'svelte/elements';

	const { class: classNames }: { class?: ClassValue } = $props();
</script>

<div class={['glass-container', classNames]}>
	<div class="glass-filter" style:filter={`url(#apple-liquid-glass-${$currentSeed})`} />
	<div class="glass-overlay" />
	<div class="glass-specular" />
	<div class="glass-content">
		<slot />
	</div>
</div>

<svg style="position: absolute; width: 0; height: 0;" aria-hidden="true">
	<defs>
		<filter
			id="apple-liquid-glass-{$currentSeed}"
			filterUnits="objectBoundingBox"
			x="-20%"
			y="-20%"
			width="140%"
			height="140%"
		>
			<feTurbulence
				type="fractalNoise"
				baseFrequency="0.005 0.005"
				numOctaves="4"
				seed={$currentSeed}
				result="noise"
			/>
			<feGaussianBlur in="noise" stdDeviation="2" result="blurred" />
			<feOffset in="blurred" result="offset">
				<animate
					attributeName="dx"
					values="0;20;33;0;-20;33;0"
					dur="13s"
					calcMode="linear"
					repeatCount="indefinite"
				/>
				<animate
					attributeName="dy"
					values="0;20;-33;0"
					dur="7s"
					calcMode="linear"
					repeatCount="indefinite"
				/>
			</feOffset>
			<feDisplacementMap
				in="SourceGraphic"
				in2="offset"
				scale="70"
				xChannelSelector="B"
				yChannelSelector="G"
			/>
		</filter>
	</defs>
</svg>

<style>
	.glass-content {
		position: relative;
		z-index: 3;
		overflow: auto;
	}
	.glass-container {
		position: relative;
		font-weight: 600;
		background: transparent;
		overflow: hidden;
		transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
	}

	.glass-filter {
		position: absolute;
		inset: 0;
		z-index: 0;
		backdrop-filter: blur(5px);
		isolation: isolate;
	}

	.glass-overlay {
		position: absolute;
		inset: 0;
		z-index: 1;
		background-color: rgba(from var(--color-base-200) r g b / 0.7);
	}

	.glass-specular {
		position: absolute;
		inset: 0;
		z-index: 2;
		border-radius: inherit;
		overflow: hidden;
	}
</style>
