<script lang="ts">
	import { cubicOut } from 'svelte/easing';
	import { tweened } from 'svelte/motion';

	const { value, children }: { value: number; children: unknown } = $props();

	const t_value = tweened(0, {
		duration: 300,
		easing: cubicOut
	});

	$effect(() => {
		t_value.set(value);
	});
</script>

<div class="counter">
	<div class="number">
		{Math.floor($t_value)}
	</div>
	<div class="description">
		<slot />
	</div>
</div>

<style>
	.counter {
		width: 150px;
		height: 150px;
		box-shadow: 1px 1px 8px 2px #33333333;
		border-radius: 30px;
		padding: 20px;
		margin: 0 10px;
		text-align: center;

		.number {
			font-family: 'Bebas Neue';
			font-size: 50px;
		}
	}
</style>
