<script lang="ts">
	import Icon from '@iconify/svelte';
	import { getButtonStyle, parseColorText, getSegmentStyle } from './utils';
	import type { TerminalLine } from './types';
	import '$lib/assets/css/tui-button.css';

	export let line: TerminalLine;
	export let index: number;
	export let selected: boolean;
	export let onClick: (idx: number) => void;
	export let onHover: (idx: number) => void;
	export let inline: boolean = false;

	// Determine if this is an external link
	$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
	
	// Parse color formatting in content
	$: segments = parseColorText(line.content);
</script>

<button
	class="tui-button"
	class:selected={selected}
	class:inline={inline}
	style="--btn-color: {getButtonStyle(line.style)}"
	on:click={() => onClick(index)}
	on:mouseenter={() => onHover(index)}
>
	<span class="btn-indicator">{selected ? '▶' : ' '}</span>
	{#if line.icon}
		<Icon icon={line.icon} width="16" />
	{/if}
	<span class="btn-text">
		{#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}
	</span>
	{#if line.href}
		{#if isExternal}
			<Icon icon="mdi:open-in-new" width="14" class="btn-arrow" />
		{:else}
			<Icon icon="mdi:chevron-right" width="16" class="btn-arrow" />
		{/if}
	{/if}
</button>
