<script lang="ts">
	import { Search, Command } from 'lucide-svelte';
	import { search } from '$lib/stores';

	// Keyboard shortcut: Cmd/Ctrl + K
	const handleKeydown = (e: KeyboardEvent) => {
		if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
			e.preventDefault();
			search.openModal();
		}
	};
</script>

<svelte:window onkeydown={handleKeydown} />

<!-- Search Button (Header) -->
<button
	class="flex items-center gap-2 rounded-lg px-3 py-2 text-white/70 transition-colors hover:bg-neon-blue/10 hover:text-neon-blue focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue"
	onclick={() => search.openModal()}
	aria-label="Search matches and players"
>
	<Search class="h-5 w-5" aria-hidden="true" />
	<span class="hidden md:inline">Search</span>
	<kbd
		class="hidden items-center gap-0.5 rounded border border-neon-blue/30 bg-void px-1.5 py-0.5 text-xs text-white/50 lg:inline-flex"
	>
		<Command class="h-3 w-3" aria-hidden="true" />
		<span>K</span>
	</kbd>
</button>
