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

	interface Props {
		children: Snippet;
		class?: string;
		hover?: boolean;
		entityId?: number | string;
		[key: string]: unknown;
	}

	let { children, class: className = '', hover = false, entityId = undefined, ...rest }: Props = $props();
</script>

<div
	class="card-component {hover ? 'card-hover' : ''} {className}"
	data-entity-id={entityId}
	{...rest}
>
	<div class="card-component__inner">
		{@render children()}
	</div>
</div>

<style>
	.card-component {
		position: relative;
		background: var(--color-glass);
		backdrop-filter: blur(28px) saturate(160%);
		-webkit-backdrop-filter: blur(28px) saturate(160%);
		border: 1px solid var(--color-border);
		border-radius: 22px;
		box-shadow: var(--shadow-card);
		transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
		overflow: hidden;
	}
	.card-component::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		pointer-events: none;
		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
		opacity: 0.4;
	}
	.card-component__inner {
		position: relative;
		z-index: 1;
		padding: 1.25rem 1.4rem;
	}
	.card-hover:hover {
		border-color: var(--color-rule-strong);
		transform: translateY(-2px);
	}
</style>
