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

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

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 mb-4 2xl:mb-5"
      :class="cn('', props.class)"
    >
      <div class="flex items-center">
        <div class="font-semibold text-gray-900 md:text-base 2xl:text-lg">
          <Icon
            :name="prep.icon!"
            class="mr-2 align-middle md:size-6"
          />
          {{ prep.title }}
        </div>
      </div>
      <div class="flex items-center">
        <!-- For components as slots -->
        <slot />

        <!-- For components passed by props -->
        <div v-if="prep.components">
          <template v-for="cwp in prep.components">
            <component
              :is="cwp.component"
              class="mr-2"
              v-bind="cwp.props"
            />
          </template>
        </div>
        <div
          v-if="refSearchNav"
          class="text-lg text-gray-900"
        >
          <Input
            type="text"
            placeholder="Search"
            @click="emitSearchNavClick"
            @input="onInput"
          />
        </div>
        <div
          v-if="prep.addNav"
          class="ms-2 flex items-center"
        >
          <Button
            class="rounded-md border border-gray-300 text-white"
            @click="btnClick"
          >
            <Icon
              name="i-lucide-plus"
              class="align-middle"
            />
            {{ prep.addNav.label }}
          </Button>
        </div>
      </div>
    </div>
  </header>
  <Separator class="my-4 xl:my-5" />
</template>
