<script lang="ts">
type Props = {
	icon: string;
	title: string;
	body: string;
	beispielInput?: string;
	beispielInputStrike?: boolean;
	beispielOutput?: string;
	beispielLabel?: string;
};

let {
	icon,
	title,
	body,
	beispielInput,
	beispielInputStrike = false,
	beispielOutput,
	beispielLabel = 'Beispiel'
}: Props = $props();
</script>

<div class="border-brand-sand break-inside-avoid rounded-sm border bg-white p-5 shadow-sm">
	<div class="mb-3 flex items-center gap-2">
		<span aria-hidden="true" class="text-xl">{icon}</span>
		<h3 class="font-serif text-base font-bold text-ink">{title}</h3>
	</div>
	<p class="font-serif text-sm leading-relaxed text-ink-2">{body}</p>

	{#if beispielOutput !== undefined}
		<div class="border-brand-sand mt-4 rounded-sm border bg-parchment px-4 py-3">
			<p class="font-sans text-xs font-semibold tracking-wider text-ink-3 uppercase">
				{beispielLabel}
			</p>
			<p class="mt-1 font-sans text-sm text-ink">
				{#if beispielInput !== undefined}
					<code
						class={['font-mono', beispielInputStrike && 'line-through'].filter(Boolean).join(' ')}
						>{beispielInput}</code
					> →
				{/if}
				<code class="font-mono">{beispielOutput}</code>
			</p>
		</div>
	{/if}
</div>
