<template>
    <div class="dataTableHeader">
        <h2 class="dataTableHeader__title">Chats</h2>
        <div class="dataTableHeader__searchWrapper">
            <svg class="dataTableHeader__icon dataTableHeader__icon--search" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
            <input
                type="text"
                class="dataTableHeader__input"
                placeholder="Search..."
                :value="searchTerm"
                @input="onInput"
            />
        </div>
    </div>
</template>

<script>
export default {
    name: 'DataTableHeader',
    props: {
        // Renamed for clarity
        searchTerm: {
            type: String,
            default: ''
        }
    },
    methods: {
        onInput(event) {
            // We extract the text value here and send ONLY the text to the parent
            this.$emit('search', event.target.value);
        }
    }
};
</script>

<style lang="less" scoped>
/* ... your existing styles ... */
@import "../../../../styles/admin/elements/table/header.less";
</style>
