<script lang="ts">
	import type { Heartbeat } from '$lib/types';

	let {
		heartbeats = []
	}: {
		heartbeats: Heartbeat[];
	} = $props();

	let blocks = $derived.by(() => {
		const all = heartbeats.slice(-30);
		const filled = all.map((h) => h.is_up);
		while (filled.length < 30) {
			filled.unshift(null);
		}
		return filled;
	});

	function blockColor(v: boolean | null): string {
		if (v === true) return 'var(--green)';
		if (v === false) return 'var(--red)';
		return 'var(--border-color)';
	}
</script>

<div class="space-y-1.5">
	<div class="flex gap-[3px]">
		{#each blocks as block, i}
			<div
				class="h-4 flex-1 rounded-sm transition-all duration-300"
				style="background-color: {blockColor(block)}; opacity: {block !== null ? 0.8 : 1}"
				title={block === true ? 'UP' : block === false ? 'DOWN' : 'Sem dados'}
			></div>
		{/each}
	</div>
	<div class="flex justify-between text-[10px] font-medium text-[var(--text-muted)]">
		<span>{heartbeats.length > 0 ? '-30 min' : ''}</span>
		<span class="tabular-nums">{heartbeats.length} checks</span>
		<span>agora</span>
	</div>
</div>
