<script lang="ts">
	import Icon from '@iconify/svelte';
	import { getButtonStyle } from './utils';
	import type { TerminalLine } from './types';

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

	// Determine if this is an external link
	$: isExternal = line.external || (line.href && (line.href.startsWith('http://') || line.href.startsWith('https://')));
</script>

<button
	class="tui-button"
	class:selected={selected}
	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">{line.content}</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>

<style>
	.tui-button {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		width: 100%;
		padding: 0.5rem 0.75rem;
		margin: 0.2rem 0;
		background: transparent;
		border: 1px solid transparent;
		border-radius: 4px;
		color: var(--btn-color);
		font-family: inherit;
		font-size: 0.9rem;
		text-align: left;
		cursor: pointer;
		transition: all 0.15s ease;
	}

	.tui-button:hover,
	.tui-button.selected {
		background: color-mix(in srgb, var(--btn-color) 15%, transparent);
		border-color: var(--btn-color);
	}

	.btn-indicator {
		color: var(--btn-color);
		font-size: 0.8rem;
		width: 1rem;
	}

	.btn-text {
		flex: 1;
	}

	:global(.btn-arrow) {
		opacity: 0.5;
	}

	.tui-button.selected :global(.btn-arrow) {
		opacity: 1;
	}
</style>
