<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 justify-between">
      <div class="flex items-center">
        <div class="text-lg font-semibold text-gray-900">
          <Icon :name="props.prep.icon!" class="mr-2 size-4 md:size-6 align-middle" />
          {{ props.prep.title }}
        </div>
      </div>
      <div class="flex items-center">
        <div v-if="props.refSearchNav" class="text-lg text-gray-900">
          <Input
            type="text"
            placeholder="Search"
            class="sm:text-sm"
            @click="emitSearchNavClick"
            @input="onInput"
          />
        </div>
        <div v-if="prep.addNav" class="flex items-center ms-2">
          <Button 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>
    </div>
  </header>
</template>
