<script lang="ts">
	interface Props {
		title?: string;
		compact?: boolean;
		children: import('svelte').Snippet;
		actions?: import('svelte').Snippet;
	}
	let { title, compact = false, children, actions }: Props = $props();
</script>

<div class="card" class:compact>
	{#if title || actions}
		<div class="card-header">
			{#if title}<h3 class="card-title">{title}</h3>{/if}
			{#if actions}<div class="card-actions">{@render actions()}</div>{/if}
		</div>
	{/if}
	<div class="card-body">
		{@render children()}
	</div>
</div>

<style>
	.card {
		background: var(--surface-1);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		min-width: 0;
		overflow: clip;
	}
	.card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 18px;
		border-bottom: 1px solid var(--border-subtle);
	}
	.card-title {
		font-size: var(--font-size-md);
		font-weight: 600;
		color: var(--text-bright);
	}
	.card-actions {
		display: flex;
		gap: 8px;
	}
	.card-body {
		padding: 18px;
	}
	.compact .card-header { padding: 10px 14px; }
	.compact .card-body { padding: 14px; }
</style>
