<script lang="ts">
	import type { Snippet } from 'svelte';
	import { IconHelpCircle } from '@tabler/icons-svelte-runes';
	import { slide } from 'svelte/transition';

	interface Props {
		children: Snippet;
		header?: string;
		helpText?: string;
	}

	let { children, header = '', helpText }: Props = $props();

	let showHelp = $state(false);
</script>

<div class="card">
	{#if header || helpText}
		<header class="card-header">
			<div class="header-content">
				{header}
			</div>
			{#if helpText}
				<button
					type="button"
					class="help-toggle"
					onclick={() => (showHelp = !showHelp)}
					aria-label="Show Help"
				>
					<IconHelpCircle
						size={26}
						stroke={2.25}
						color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'}
					/>
				</button>
			{/if}
		</header>

		{#if showHelp && helpText}
			<div class="help-drawer" transition:slide={{ duration: 400 }}>
				<p>{helpText}</p>
			</div>
		{/if}
	{/if}

	<div class="card-body">
		{@render children?.()}
	</div>
</div>

<style>
	.card {
		background: var(--color-accent);
		position: relative;
		border-radius: 12px;
		overflow: visible;
		width: 95%;
		max-width: 600px;
		text-align: center;
		font-family: 'URW Gothic', sans-serif;
		color: var(--color-brand);
		padding: 10px 0;
		box-shadow: var(--shadow-std);
	}

	.header-content {
		flex: 1;
		margin: 0;
		font-size: 1.3rem;
		font-weight: 600;
	}

	.help-toggle {
		position: absolute;
		top: 8px;
		right: 8px;
		background: none;
		border: none;
		padding: 4px;
		cursor: help;
		opacity: 0.6;
		z-index: 2;
		transition:
			opacity 0.2s,
			transform 0.2s;
	}

	.help-toggle:hover {
		opacity: 1;
		transform: scale(1.1);
	}

	.help-drawer {
		background-color: var(--color-accent);
		padding: 4px 16px;
		font-size: 0.95rem;
		line-height: 1.2;
		margin: auto;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
		color: var(--color-title);
	}
</style>
