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

	let {
		title,
		action = '',
		onaction,
		children
	}: {
		title: string;
		action?: string;
		onaction?: () => void;
		children: Snippet;
	} = $props();
</script>

<div class="module">
	<div class="module-header">
		<h3 class="module-title">{title}</h3>
		{#if action}
			<button class="module-action" onclick={onaction} type="button">
				{action}
			</button>
		{/if}
	</div>
	<div class="module-content">
		{@render children()}
	</div>
</div>

<style>
	.module {
		background: var(--card);
		border-radius: var(--radius, 12px);
		padding: var(--card-pad-primary, 20px);
		box-shadow: var(--card-shadow);
		border: 1px solid var(--border);
	}

	.module-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--sp-5);
	}

	.module-title {
		font-size: var(--text-sm);
		font-weight: 600;
		color: var(--text-3);
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.module-action {
		font-size: var(--text-sm);
		color: var(--accent);
		font-weight: 500;
		cursor: pointer;
		background: none;
		border: none;
		font-family: var(--font);
		padding: 0;
	}

	.module-action:hover {
		text-decoration: underline;
	}
</style>
