@namespace NexusReader.UI.Shared.Components.Atoms

<div class="nexus-search-container @(IsActive ? "active" : "")">
    <div class="search-wrapper">
        <i class="nexus-icon @IconClass"></i>
        <input type="text" 
               @bind="SearchValue" 
               @bind:event="oninput"
               @onkeypress="HandleKeyPress"
               placeholder="@Placeholder" 
               class="nexus-search-input" />
        @if (!string.IsNullOrEmpty(SearchValue))
        {
            <button class="clear-btn" @onclick="ClearSearch">×</button>
        }
    </div>
</div>

@code {
    [Parameter] public string Placeholder { get; set; } = "Search your library...";
    [Parameter] public string IconClass { get; set; } = "bi bi-search";
    [Parameter] public EventCallback<string> OnSearch { get; set; }
    
    private string SearchValue { get; set; } = string.Empty;
    private bool IsActive => !string.IsNullOrEmpty(SearchValue);

    private async Task HandleKeyPress(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            await OnSearch.InvokeAsync(SearchValue);
        }
    }

    private void ClearSearch()
    {
        SearchValue = string.Empty;
    }
}