<script lang="ts">
	import type { ComponentType } from 'svelte';

	interface Props {
		icon: ComponentType;
		title: string;
		description: string;
		glowColor?: 'blue' | 'gold' | 'red' | 'green' | 'purple';
		delay?: number;
	}

	let { icon: Icon, title, description, glowColor = 'blue', delay = 0 }: Props = $props();

	const glowClasses: Record<string, { icon: string; border: string; bg: string }> = {
		blue: {
			icon: 'text-neon-blue',
			border: 'group-hover:border-neon-blue/50',
			bg: 'group-hover:bg-neon-blue/5'
		},
		gold: {
			icon: 'text-neon-gold',
			border: 'group-hover:border-neon-gold/50',
			bg: 'group-hover:bg-neon-gold/5'
		},
		red: {
			icon: 'text-neon-red',
			border: 'group-hover:border-neon-red/50',
			bg: 'group-hover:bg-neon-red/5'
		},
		green: {
			icon: 'text-neon-green',
			border: 'group-hover:border-neon-green/50',
			bg: 'group-hover:bg-neon-green/5'
		},
		purple: {
			icon: 'text-neon-purple',
			border: 'group-hover:border-neon-purple/50',
			bg: 'group-hover:bg-neon-purple/5'
		}
	};

	const classes = glowClasses[glowColor] ?? glowClasses['blue']!;

	// Background glow colors for each variant
	const glowBgColors: Record<string, string> = {
		blue: 'rgba(0, 212, 255, 0.1)',
		gold: 'rgba(255, 215, 0, 0.1)',
		red: 'rgba(255, 51, 102, 0.1)',
		green: 'rgba(0, 255, 136, 0.1)',
		purple: 'rgba(139, 92, 246, 0.1)'
	};
	const glowBgColor = glowBgColors[glowColor];
</script>

<article
	class="group relative flex h-full flex-col rounded-xl border border-white/10 bg-void-light p-6 transition-all duration-300 motion-reduce:transition-none {classes.border} {classes.bg}"
	style="animation-delay: {delay}ms;"
>
	<!-- Icon Container -->
	<div
		class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-white/5 transition-all duration-300 group-hover:scale-110 motion-reduce:group-hover:scale-100 {classes.icon}"
		aria-hidden="true"
	>
		<Icon class="h-6 w-6" />
	</div>

	<!-- Title -->
	<h3 class="mb-2 text-xl font-semibold text-white">{title}</h3>

	<!-- Description -->
	<p class="flex-grow text-sm leading-relaxed text-white/70">{description}</p>

	<!-- Hover Glow Effect -->
	<div
		class="pointer-events-none absolute inset-0 -z-10 rounded-xl opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100"
		style="background-color: {glowBgColor};"
		aria-hidden="true"
	></div>
</article>
