<script lang="ts">
	import Icon from '@iconify/svelte';

	let {
		icon,
		color,
		foregroundColor = 'white',
		strokeColor = foregroundColor,
		isHomeScreen = false
	}: {
		icon: string;
		color: string;
		foregroundColor?: string;
		strokeColor?: string;
		isHomeScreen?: boolean;
	} = $props();
</script>

<div class="relative">
	<div
		class:w-20={isHomeScreen}
		class:h-20={isHomeScreen}
		class:w-12={!isHomeScreen}
		class:h-12={!isHomeScreen}
		class="rounded-3xl shadow-xl flex items-center justify-center transition-all duration-300 group-hover:shadow-2xl group-hover:scale-105"
		style="background: linear-gradient(135deg, {color}dd 0%, {color} 50%, {color}bb 100%)"
	>
		<Icon
			{icon}
			width="80%"
			style="color: {foregroundColor}; stroke: {strokeColor}; stroke-width: 0.5px;"
			class="drop-shadow-lg transition-all duration-300 group-hover:scale-110"
		/>
	</div>

	<div
		class:w-20={isHomeScreen}
		class:h-20={isHomeScreen}
		class:w-12={!isHomeScreen}
		class:h-12={!isHomeScreen}
		class="absolute inset-0 rounded-3xl opacity-0 group-hover:opacity-30 transition-all duration-500 blur-sm scale-110 pointer-events-none"
		style="background: radial-gradient(circle, {color}66 0%, transparent 70%)"
	/>
</div>
