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

	interface Props {
		variant?: 'default' | 'elevated' | 'interactive';
		padding?: 'none' | 'sm' | 'md' | 'lg';
		class?: string;
		onclick?: () => void;
		children: Snippet;
	}

	let {
		variant = 'default',
		padding = 'md',
		class: className = '',
		onclick,
		children
	}: Props = $props();

	const baseClasses = 'bg-void-light border border-white/10 rounded-xl transition-all duration-300';

	const variantClasses = {
		default: 'shadow-sm hover:shadow-[0_0_20px_rgba(0,212,255,0.05)]',
		elevated: 'shadow-lg shadow-black/20 hover:shadow-[0_0_30px_rgba(0,212,255,0.1)]',
		interactive:
			'cursor-pointer hover:border-neon-blue/50 hover:shadow-[0_0_20px_rgba(0,212,255,0.15)] hover:-translate-y-0.5'
	};

	const paddingClasses = {
		none: '',
		sm: 'p-3',
		md: 'p-4',
		lg: 'p-6'
	};

	const classes =
		`${baseClasses} ${variantClasses[variant]} ${paddingClasses[padding]} ${className}` +
		(onclick ? ' cursor-pointer' : '');
</script>

{#if onclick}
	<button class={classes} {onclick}>
		{@render children()}
	</button>
{:else}
	<div class={classes}>
		{@render children()}
	</div>
{/if}
