<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

let { text, maxLines = 10 }: { text: string; maxLines?: number } = $props();

let expanded = $state(false);
let el = $state<HTMLElement | undefined>(undefined);
let isClamped = $state(false);

$effect(() => {
	if (el && !expanded) {
		isClamped = el.scrollHeight > el.clientHeight;
	}
});
</script>

<div>
	<div
		bind:this={el}
		style={!expanded ? `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${maxLines}` : ''}
		class="rounded border border-line bg-muted p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-ink"
	>
		{text}
	</div>
	{#if isClamped || expanded}
		<button
			onclick={() => (expanded = !expanded)}
			class="mt-2 font-sans text-xs text-ink-3 transition hover:text-ink"
		>
			{expanded ? m.comp_expandable_show_less() : m.comp_expandable_show_more()}
		</button>
	{/if}
</div>
