<script lang="ts">
	import Icon from "@iconify/svelte";
	import "$lib/assets/css/tui-footer.css";

	interface Props {
		isTyping: boolean;
		linesCount: number;
		skipAnimation: () => void;
	}

	let { isTyping, linesCount, skipAnimation }: Props = $props();
</script>

<div class="tui-statusbar bottom">
	<span class="status-left">
		<Icon icon="mdi:console" width="14" />
		<span>TUI</span>
	</span>
	<span class="status-center">
		{#if isTyping}
			<span class="typing-indicator">Loading...</span>
		{:else}
			Ready
		{/if}
	</span>
	<span class="status-right">
		{#if isTyping}
			<button class="skip-btn" onclick={skipAnimation}>
				<Icon icon="mdi:skip-forward" width="12" />
				<span>Skip (Y)</span>
			</button>
		{:else}
			<span class="line-count">{linesCount} lines</span>
		{/if}
	</span>
</div>
