<script lang="ts">
	import { goto } from '$app/navigation';
	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
	import Textbox from '$lib/components/ui/form-elements/Textbox.svelte';

	let headcode = $state('');

	function handleSearch(headcode: string) {
		if (!headcode.trim()) return;

		const searchParams = new URLSearchParams();
		searchParams.append('h', headcode.trim().toUpperCase());

		goto(`/trains?${searchParams.toString()}`);
	}
</script>

<BaseCard header={'Search Train & PIS'}>
	<div class="card-content">
		<Textbox
			placeholder="Enter Headcode"
			bind:value={headcode}
			maxLength={4}
			onsubmit={handleSearch}
		/>
	</div>
</BaseCard>

<style>
	.card-content {
		text-align: center;
		width: 90%;
		margin: auto;
		padding: 10px 0 0.5rem 0;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
</style>
