<script lang="ts">
	import { stripMarkdown } from '$lib/markdown';

	let { title, subtitle, content, actions, maxContentLength = 100 } = $props();

	let displayContent = $derived(
		maxContentLength && content.length > maxContentLength
			? stripMarkdown(content.slice(0, maxContentLength)) + '...'
			: stripMarkdown(content)
	);
</script>

<div class="card">
	<div class="card-content">
		<p class="title is-4">{title}</p>
		{#if subtitle}
			<p class="subtitle is-6">{subtitle}</p>
		{/if}
		<div class="content">
			{displayContent}
		</div>
	</div>
	{#if actions.length > 0}
		<footer class="card-footer">
			{#each actions as action}
				{#if action.href}
					<a href={action.href} class="card-footer-item" class:has-text-danger={action.isDangerous}>
						{action.label}
					</a>
				{:else}
					<button
						class="card-footer-item button is-ghost"
						class:has-text-danger={action.isDangerous}
						onclick={action.onClick}
					>
						{action.label}
					</button>
				{/if}
			{/each}
		</footer>
	{/if}
</div>
