<script lang="ts">
	import { HORSE_LENGTH, speedGain } from '$lib/race';
	import type { Snippet } from 'svelte';
	import CalcInfo from '../CalcInfo.svelte';

	interface Props {
		children: Snippet;
		speed: number;
		dur: number;
		accel: number;
		decel: number | number[];
	}

	function fmtp(x: number): string {
		return x >= 0 ? '+' + x.toFixed(3) : x.toFixed(3);
	}

	const { children, speed, dur, accel, decel }: Props = $props();
	const decels = $derived([decel].flat(1));

	const gain = $derived(decels.map((d) => speedGain(speed, dur, accel, d) / HORSE_LENGTH));
	const text = $derived(gain.map(fmtp).join(' – '));
</script>

<CalcInfo title={children} class="max-w-80 flex-1">
	{text} L
	{#snippet additional()}
		<div class="flex flex-row">
			<span class="flex-1 text-xs">{fmtp(speed)} m/s</span>
			<span class="flex-1 text-xs">{dur.toFixed(3)} s</span>
		</div>
	{/snippet}
</CalcInfo>
