<script lang="ts">
	interface Props {
		saldo?: {
			trabalhadoMinutos: number;
			esperadoMinutos: number;
			diferencaMinutos: number;
		} | null;
		size?: 'sm' | 'md' | 'lg';
	}

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

	function formatarMinutos(minutos: number): { horas: number; minutos: number } {
		const horas = Math.floor(Math.abs(minutos) / 60);
		const mins = Math.abs(minutos) % 60;
		return { horas, minutos: mins };
	}

	const sizeClasses = {
		sm: 'text-xs px-2 py-1',
		md: 'text-sm px-3 py-1.5',
		lg: 'text-base px-4 py-2'
	};
</script>

{#if saldo}
	{@const trabalhado = formatarMinutos(saldo.trabalhadoMinutos)}
	{@const diferenca = formatarMinutos(saldo.diferencaMinutos)}
	{@const sinalDiferenca = saldo.diferencaMinutos >= 0 ? '+' : '-'}
	{@const isNegativo = saldo.diferencaMinutos < 0}
	
	<div class="inline-flex items-center gap-1.5 {sizeClasses[size]} rounded-lg font-semibold shadow-sm border {
		isNegativo 
			? 'bg-red-50 border-red-200 text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400' 
			: 'bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-800 dark:text-green-400'
	}">
		<span class="font-bold text-green-600 dark:text-green-400">+{trabalhado.horas}h {trabalhado.minutos}min</span>
		<span class="text-base-content/50">/</span>
		<span class={isNegativo ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}>
			{sinalDiferenca}{diferenca.horas}h {diferenca.minutos}min
		</span>
	</div>
{:else}
	<span class="badge badge-ghost {sizeClasses[size]}">-</span>
{/if}

