<script setup lang="ts">
import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'

const props = defineProps<{
  prep: HeaderPrep
  refSearchNav: RefSearchNav
}>()

function emitSearchNavClick() {
  props.refSearchNav.onClick()
}

function onInput(event: Event) {
  props.refSearchNav.onInput((event.target as HTMLInputElement).value)
}

function btnClick() {
  props.prep?.addNav?.onClick?.()
}
</script>

<template>
  <header>
    <div class="flex items-center">
      <div class="ml-3 text-lg text-gray-900">
        <Input
          type="text"
          placeholder="Search"
          class="w-full rounded-md border bg-white px-4 py-2 text-gray-900 sm:text-sm"
          @click="emitSearchNavClick"
          @input="onInput"
        />
      </div>
      <div v-if="prep.addNav" class="m-2 flex items-center">
        <Button size="md" class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
          <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
          {{ prep.addNav.label }}
        </Button>
      </div>
    </div>
  </header>
</template>
