<script lang="ts">
	import Icon from "@iconify/svelte";
	import { getButtonStyle, parseColorText, getSegmentStyle } from "./utils";
	import { themeColors } from "$lib/stores/theme";
	import type { LinkLine } from "./types";
	import "$lib/assets/css/tui-link.css";

	interface Props {
		line: LinkLine;
		onClick: () => void;
	}

	let { line, onClick }: Props = $props();

	// Determine if this is an external link
	const isExternal = $derived(
		line.external ||
			(line.href &&
				(line.href.startsWith("http://") ||
					line.href.startsWith("https://"))),
	);

	// Parse color formatting in content using theme colorMap
	const segments = $derived(
		parseColorText(line.content, $themeColors.colorMap),
	);
</script>

<span class="tui-link" style="--link-color: {getButtonStyle(line.style)}">
	{#if line.icon}
		<Icon icon={line.icon} width="14" class="link-icon" />
	{/if}
	<button class="link-text" onclick={onClick}>
		{#each segments as segment}
			{#if segment.icon}
				<Icon icon={segment.icon} width="14" class="inline-icon" />
			{:else if getSegmentStyle(segment)}
				<span style={getSegmentStyle(segment)}>{segment.text}</span>
			{:else}
				{segment.text}
			{/if}
		{/each}
	</button>
	{#if isExternal}
		<Icon icon="mdi:open-in-new" width="12" class="link-external" />
	{/if}
</span>

<style>
	.tui-link {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
	}

	:global(.link-icon) {
		color: var(--link-color);
		opacity: 0.8;
	}

	.link-text {
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		font-family: inherit;
		font-size: inherit;
		color: var(--link-color);
		text-decoration: underline;
		text-decoration-style: dotted;
		text-underline-offset: 2px;
		cursor: pointer;
		transition: all 0.15s ease;
	}

	.link-text:hover {
		text-decoration-style: solid;
		filter: brightness(1.2);
	}

	:global(.link-external) {
		color: var(--link-color);
		opacity: 0.5;
	}

	.tui-link:hover :global(.link-external) {
		opacity: 0.8;
	}

	:global(.inline-icon) {
		display: inline-block;
		vertical-align: middle;
		margin: 0 0.15em;
	}
</style>
