<template>
    <div class="relative flex flex-col sm:flex-row gap-3 max-w-md w-full">
        <div class="relative flex-1">
            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">
                <iconify-icon icon="lucide:map-pin" style="font-size:1.25rem"></iconify-icon>
            </span>
            <input
                v-model="postcode"
                @input="onInput"
                type="text"
                placeholder="Enter postcode, e.g. SW1A 1AA"
                class="w-full h-14 pl-12 pr-4 bg-white border border-zinc-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent shadow-inner text-base"
            />
        </div>
        <button
            @click="emit('search', postcode)"
            :disabled="!postcode.trim()"
            class="h-14 px-8 bg-accent text-white rounded-xl font-bold text-base shadow-xl hover:bg-accent-content transition-all disabled:opacity-50 disabled:cursor-not-allowed"
        >
            Find Prices
        </button>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['search'])
const postcode = ref('')
let debounceTimer = null

function onInput() {
    clearTimeout(debounceTimer)
    debounceTimer = setTimeout(() => {
        if (postcode.value.trim().length >= 2) {
            emit('search', postcode.value.trim())
        }
    }, 400)
}
</script>
