<script lang="ts">
	import CalcInfo from '../CalcInfo.svelte';

	interface Props {
		maxHP: number;
		needHP: number;
		effStam: number;
		spurtStartHP?: number[];
		showStats: boolean;
		mode: number;
		modePer: number;
		mean: number;
	}

	let { maxHP, needHP, effStam, spurtStartHP = [0, 0], showStats, mode, modePer, mean }: Props = $props();

	const needHPPer = $derived((100 * needHP) / maxHP);
	const white = $derived(Math.trunc(maxHP * 0.015));
	const gold = $derived(Math.trunc(maxHP * 0.055));
	const goldDebuff = $derived(Math.trunc(maxHP * -0.03));
</script>

<div class="mx-auto flex w-full flex-col place-items-center md:flex-row md:justify-center">
	<CalcInfo title="Max HP" class="max-w-72 flex-1">{Math.floor(maxHP)}</CalcInfo>
	<CalcInfo title="Spurt Threshold" class="max-w-72 flex-1">{Math.ceil(needHP)} ({needHPPer.toFixed(1)}%)</CalcInfo>
	<CalcInfo title="Spurt Start HP" class="hidden max-w-72 flex-1">
		{Math.ceil(spurtStartHP[1])} &ndash; {Math.ceil(spurtStartHP[0])}
	</CalcInfo>
</div>
<div class="mx-auto flex w-full flex-col place-items-center md:flex-row md:justify-center">
	<CalcInfo title="White Recovery" class="max-w-72 flex-1">+{white} HP</CalcInfo>
	<CalcInfo title="Gold Recovery" class="max-w-72 flex-1">+{gold} HP</CalcInfo>
	<CalcInfo title="Gold Debuff" class="max-w-72 flex-1">{goldDebuff} HP</CalcInfo>
</div>
{#if showStats}
	<div class="mx-auto flex w-full flex-col place-items-center md:flex-row md:justify-center">
		<CalcInfo title="Mode HP from Skills" class="max-w-72 flex-1">{Math.round(mode)} (P={modePer.toFixed(1)}%)</CalcInfo>
		<CalcInfo title="Mean HP from Skills" class="max-w-72 flex-1">{Math.round(mean)}</CalcInfo>
		<CalcInfo title="Effective Stamina" class="max-w-72 flex-1">{Math.ceil(effStam)}</CalcInfo>
	</div>
{/if}
