<script lang="ts">
	import { Clock } from 'lucide-svelte';

	interface Estatisticas {
		totalRegistros: number;
		totalFuncionarios: number;
		dentroDoPrazo: number;
	}

	interface Props {
		estatisticas?: Estatisticas;
	}

	let { estatisticas = undefined }: Props = $props();
</script>

<section
	class="border-base-300 from-primary/10 via-base-100 to-secondary/10 relative mb-8 overflow-hidden rounded-2xl border bg-gradient-to-br p-8 shadow-lg"
>
	<div class="bg-primary/20 absolute top-10 -left-10 h-40 w-40 rounded-full blur-3xl"></div>
	<div class="bg-secondary/20 absolute right-0 -bottom-16 h-56 w-56 rounded-full blur-3xl"></div>
	<div class="relative z-10 flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
		<div class="flex items-center gap-4">
			<div
				class="bg-primary/20 border-primary/30 rounded-2xl border p-4 shadow-lg backdrop-blur-sm"
			>
				<Clock class="text-primary h-10 w-10" strokeWidth={2.5} />
			</div>
			<div class="max-w-3xl space-y-2">
				<h1 class="text-base-content text-4xl leading-tight font-black sm:text-5xl">
					Registro de Pontos
				</h1>
				<p class="text-base-content/70 text-base leading-relaxed sm:text-lg">
					Gerencie e visualize os registros de ponto dos funcionários com informações detalhadas e
					relatórios
				</p>
			</div>
		</div>
		{#if estatisticas}
			<div
				class="border-base-200/60 bg-base-100/70 grid grid-cols-2 gap-4 rounded-2xl border p-6 shadow-lg backdrop-blur sm:max-w-sm"
			>
				<div>
					<p class="text-base-content/60 text-sm font-semibold">Total de Registros</p>
					<p class="text-base-content mt-2 text-2xl font-bold">{estatisticas.totalRegistros}</p>
				</div>
				<div class="text-right">
					<p class="text-base-content/60 text-sm font-semibold">Funcionários</p>
					<p class="text-base-content mt-2 text-xl font-bold">{estatisticas.totalFuncionarios}</p>
				</div>
				<div
					class="via-base-300 col-span-2 h-px bg-gradient-to-r from-transparent to-transparent"
				></div>
				<div class="text-base-content/70 col-span-2 flex items-center justify-between text-sm">
					<span>
						{estatisticas.totalRegistros > 0
							? ((estatisticas.dentroDoPrazo / estatisticas.totalRegistros) * 100).toFixed(1)
							: 0}% dentro do prazo
					</span>
					<span class="badge badge-primary badge-sm">Ativo</span>
				</div>
			</div>
		{/if}
	</div>
</section>

