<script lang="ts">
	import { Clock, CheckCircle2, XCircle } from 'lucide-svelte';
	import { resolve } from '$app/paths';
</script>

<div class="card bg-base-100 shadow-xl transition-all duration-300 hover:shadow-2xl">
	<div class="card-body">
		<!-- Cabeçalho da Categoria -->
		<div class="mb-6 flex items-start gap-6">
			<div class="rounded-2xl bg-blue-500/20 p-4">
				<div class="text-blue-600">
					<Clock class="h-12 w-12" strokeWidth={2} />
				</div>
			</div>
			<div class="flex-1">
				<h2 class="card-title mb-2 text-2xl text-blue-600">Gestão de Pontos</h2>
				<p class="text-base-content/70">Registros de ponto do dia</p>
			</div>
		</div>

		<!-- Grid de Opções -->
		<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
			<a
				href={resolve('/(dashboard)/recursos-humanos/registro-pontos')}
				class="group border-base-300 hover:border-primary relative transform overflow-hidden rounded-xl border-2 bg-linear-to-br from-blue-500/10 to-blue-600/20 p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
			>
				<div class="flex h-full flex-col">
					<div class="mb-4 flex items-start justify-between">
						<div
							class="bg-base-100 group-hover:bg-primary rounded-lg p-3 transition-colors duration-300 group-hover:text-white"
						>
							<div class="text-blue-600 group-hover:text-white">
								<Clock class="h-5 w-5" strokeWidth={2} />
							</div>
						</div>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="text-base-content/30 group-hover:text-primary h-5 w-5 transition-colors duration-300"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 5l7 7-7 7"
							/>
						</svg>
					</div>
					<h3
						class="text-base-content group-hover:text-primary mb-2 text-lg font-bold transition-colors duration-300"
					>
						Gestão de Pontos
					</h3>
					<p class="text-base-content/70 flex-1 text-sm">
						Visualizar e gerenciar registros de ponto
					</p>
				</div>
			</a>
			<a
				href={resolve('/(dashboard)/recursos-humanos/controle-ponto/homologacao')}
				class="group border-base-300 hover:border-primary relative transform overflow-hidden rounded-xl border-2 bg-linear-to-br from-green-500/10 to-green-600/20 p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
			>
				<div class="flex h-full flex-col">
					<div class="mb-4 flex items-start justify-between">
						<div
							class="bg-base-100 group-hover:bg-primary rounded-lg p-3 transition-colors duration-300 group-hover:text-white"
						>
							<div class="text-green-600 group-hover:text-white">
								<CheckCircle2 class="h-5 w-5" strokeWidth={2} />
							</div>
						</div>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="text-base-content/30 group-hover:text-primary h-5 w-5 transition-colors duration-300"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 5l7 7-7 7"
							/>
						</svg>
					</div>
					<h3
						class="text-base-content group-hover:text-primary mb-2 text-lg font-bold transition-colors duration-300"
					>
						Homologação de Registro
					</h3>
					<p class="text-base-content/70 flex-1 text-sm">
						Edite registros de ponto e ajuste banco de horas
					</p>
				</div>
			</a>
			<a
				href={resolve('/(dashboard)/recursos-humanos/controle-ponto/dispensa')}
				class="group border-base-300 hover:border-primary relative transform overflow-hidden rounded-xl border-2 bg-linear-to-br from-orange-500/10 to-orange-600/20 p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
			>
				<div class="flex h-full flex-col">
					<div class="mb-4 flex items-start justify-between">
						<div
							class="bg-base-100 group-hover:bg-primary rounded-lg p-3 transition-colors duration-300 group-hover:text-white"
						>
							<div class="text-orange-600 group-hover:text-white">
								<XCircle class="h-5 w-5" strokeWidth={2} />
							</div>
						</div>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							class="text-base-content/30 group-hover:text-primary h-5 w-5 transition-colors duration-300"
							fill="none"
							viewBox="0 0 24 24"
							stroke="currentColor"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M9 5l7 7-7 7"
							/>
						</svg>
					</div>
					<h3
						class="text-base-content group-hover:text-primary mb-2 text-lg font-bold transition-colors duration-300"
					>
						Dispensa de Registro
					</h3>
					<p class="text-base-content/70 flex-1 text-sm">
						Gerencie períodos de dispensa de registro de ponto
					</p>
				</div>
			</a>
		</div>
	</div>
</div>
