<script setup lang="ts">
const props = defineProps<{
  title: string;
  modelValue: string;
  searchPlaceholder: string;
}>();

const emit = defineEmits<{
  'update:modelValue': [value: string];
}>();

function updateValue(event: Event) {
  emit('update:modelValue', (event.target as HTMLInputElement).value);
}
</script>

<template>
  <div class="space-y-5">
    <h1 class="text-3xl font-extrabold text-[#0f2f20]">{{ props.title }}</h1>

    <slot name="tabs" />

    <div class="flex flex-col gap-3 md:flex-row md:items-center">
      <label class="flex w-full flex-1 items-center gap-3 rounded-full border border-[#d7e9de] bg-white px-4 py-3 transition focus-within:border-[#139957] focus-within:shadow-[0_0_0_3px_rgba(19,153,87,0.12)]">
        <svg
          class="h-4 w-4 shrink-0 text-base-content/45"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M14.1667 14.1667L17.5 17.5"
            stroke="currentColor"
            stroke-width="1.6"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <circle
            cx="8.75"
            cy="8.75"
            r="5.83333"
            stroke="currentColor"
            stroke-width="1.6"
          />
        </svg>
        <input
          :value="props.modelValue"
          type="text"
          class="min-w-0 grow bg-transparent text-sm text-[#123824] outline-none placeholder:text-[#7b9487]"
          :placeholder="props.searchPlaceholder"
          @input="updateValue"
        >
      </label>

      <slot name="controls" />
    </div>

    <slot />
  </div>
</template>
