<script lang="ts">
	interface Props {
		saldo?: {
			saldoMinutos: number;
			horas: number;
			minutos: number;
			positivo: boolean;
		} | null;
		size?: 'sm' | 'md' | 'lg';
	}

	const { saldo, size = 'md' }: Props = $props();

	function formatarSaldo(saldo: NonNullable<Props['saldo']>): string {
		const sinal = saldo.positivo ? '+' : '-';
		return `${sinal}${saldo.horas}h ${saldo.minutos}min`;
	}

	const sizeClasses = {
		sm: 'badge-sm',
		md: 'badge-lg',
		lg: 'badge-xl'
	};
</script>

{#if saldo}
	<span
		class="badge font-semibold shadow-sm {sizeClasses[size]} {saldo.positivo
			? 'badge-success'
			: 'badge-error'}"
	>
		{formatarSaldo(saldo)}
	</span>
{:else}
	<span class="badge badge-ghost {sizeClasses[size]}">-</span>
{/if}
