<script lang="ts">
	import Icon from '@iconify/svelte';
	import { user } from '$lib/config';
	import type { SpeedPreset } from '$lib/config';

	export let title = 'terminal';
	export let interactive = true;
	export let hasButtons = false;
</script>

<div class="tui-statusbar top">
	<span class="status-left">
		<Icon icon="mdi:arch" width="14" />
		<span>{user.username}@{user.hostname}</span>
	</span>
	<span class="status-center">{title}</span>
	<span class="status-right">
		{#if interactive && hasButtons}
			<span class="hint">↑↓ navigate</span>
			<span class="hint">⏎ select</span>
		{/if}
	</span>
</div>

<style>
	.tui-statusbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.4rem 0.75rem;
		font-size: 0.75rem;
		background: var(--terminal-bg-light);
		border-color: var(--terminal-border);
	}

	.tui-statusbar.top {
		border-bottom: 1px solid var(--terminal-border);
	}

	.status-left, .status-right {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--terminal-muted);
	}

	.status-center {
		color: var(--terminal-primary);
		font-weight: 600;
	}

	.hint {
		padding: 0.1rem 0.4rem;
		background: var(--terminal-border);
		border-radius: 3px;
		font-size: 0.7rem;
	}

	@media (max-width: 768px) {
		.hint {
			display: none;
		}
	}
</style>
