<script lang="ts">
	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
	import Textbox from '$lib/components/ui/Textbox.svelte';
	import Button from '$lib/components/ui/Button.svelte';

	let { onsearch }: { onsearch: (c: string) => void } = $props();
</script>

<BaseCard header={'Find by Code'}>
	<div class="card-content">
		<div class="textbox-container">
			<div class="textbox-item-wrapper">
				<Textbox
					placeholder={'Code'}
					uppercase={true}
					type={'text'}
					onsubmit={onsearch}
					maxLength={4}
					inputmode={'numeric'}
				/>
			</div>
		</div>
	</div>
</BaseCard>

<style>
	.card-content {
		text-align: center;
		width: 90%;
		margin: auto;
		padding: 10px 0 10px 0;
	}

	.textbox-container {
		display: flex;
		width: 100%;
		justify-content: center;
		gap: 4rem;
	}

	.textbox-item-wrapper {
		width: 60%;
	}

	.button-wrapper {
		display: flex;
		justify-content: center;
		gap: 1rem;
		margin-top: 15px;
	}
</style>
