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

	const { 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 border font-semibold shadow-sm {isNegativo
			? 'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400'
			: 'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/20 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}
