<script lang="ts">
	interface Props {
		estoqueAtual: number;
		estoqueMinimo: number;
		estoqueMaximo?: number;
		unidadeMedida: string;
	}

	let { estoqueAtual, estoqueMinimo, estoqueMaximo, unidadeMedida }: Props = $props();

	{@const porcentagem = estoqueMaximo
		? Math.min(100, (estoqueAtual / estoqueMaximo) * 100)
		: estoqueAtual > estoqueMinimo
			? 100
			: Math.max(0, (estoqueAtual / estoqueMinimo) * 100)}

	{@const cor = estoqueAtual <= estoqueMinimo
		? 'text-error'
		: estoqueMaximo && estoqueAtual >= estoqueMaximo * 0.8
			? 'text-warning'
			: 'text-success'}

	{@const corBarra = estoqueAtual <= estoqueMinimo
		? 'bg-error'
		: estoqueMaximo && estoqueAtual >= estoqueMaximo * 0.8
			? 'bg-warning'
			: 'bg-success'}
</script>

<div class="flex flex-col gap-2">
	<div class="flex items-center justify-between">
		<span class="text-sm font-medium">Estoque</span>
		<span class="text-sm font-bold {cor}">
			{estoqueAtual} {unidadeMedida}
		</span>
	</div>
	<div class="w-full bg-base-300 rounded-full h-3 overflow-hidden">
		<div
			class="h-full {corBarra} transition-all duration-500"
			style="width: {porcentagem}%"
		></div>
	</div>
	<div class="flex items-center justify-between text-xs text-base-content/60">
		<span>Mín: {estoqueMinimo}</span>
		{#if estoqueMaximo}
			<span>Máx: {estoqueMaximo}</span>
		{/if}
	</div>
</div>


