<script lang="ts">
	import { resolve } from "$app/paths";
	import ProfilePopover from "#lib/components/profile/ProfilePopover.svelte";
	import { bioSegments } from "#lib/components/profile/bio.ts";

	interface Props {
		text: string;
		class?: string;
	}

	let { text, class: className }: Props = $props();

	const segments = $derived(bioSegments(text));
</script>

<div data-testid="profileBio" class={["whitespace-pre-line", className]}>
	{#each segments as segment, i (i)}
		{#if segment.kind === "mention"}
			<ProfilePopover identifier={segment.handle}>
				<a href={resolve(`/${segment.handle}` as "/")} class="font-medium hover:underline"
					>@{segment.handle}</a
				>
			</ProfilePopover>
		{:else}
			{segment.text}
		{/if}
	{/each}
</div>