<script lang="ts">
	import Icon from "@iconify/svelte";
	import { user } from "$lib/config";
	import {
		colorTheme,
		getThemeIcon,
		type ColorTheme,
	} from "$lib/stores/theme";
	import "$lib/assets/css/tui-header.css";

	interface Props {
		title?: string;
		interactive?: boolean;
		hasButtons?: boolean;
	}

	let {
		title = "terminal",
		interactive = true,
		hasButtons = false,
	}: Props = $props();
</script>

<div class="tui-statusbar top">
	<span class="status-left">
		<Icon icon={getThemeIcon($colorTheme)} width="14" />
		<span class="user-host">{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>
