@inject ISearchService SearchService
@inject NavigationManager NavigationManager
@inject IJSRuntime JsRuntime

<button id="@Id" class="searchButtonContainer" @onclick="ButtonClicked">
    <div class="searchText">
        <i class="fa-solid fa-magnifying-glass" style="margin-left: 3px; margin-right: 6px;"></i> Search...
    </div>
    <div class="searchHotkey">
        @if (IsMac)
        {
            <span><i class="fa-solid fa-command"></i>K</span>
        }
        else
        {
            <span>CTRL + K</span>
        }

    </div>
</button>

<style>
    .searchButtonContainer {
        background-color: var(--primary);
        border: 2px solid var(--primary-border);
        border-radius: 8px;
        font-weight: 800;
        width: 350px;

        padding: 5px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

    }

    .searchHotkey {
        padding: 4px;
        background-color: rgba(255, 255, 255, 0.05);
        border: 2px solid rgba(255, 255, 255, 0.25);
        border-radius: 4px;
    }
</style>

@code {

    [Parameter] public RenderFragment ChildContent { get; set; } = default!;

    [Parameter] public string Id { get; set; } = default!;

    private string _userAgent = "";

    bool IsMac => _userAgent.Contains("Mac OS");

    private void ButtonClicked(EventArgs eventArgs)
    {
        SearchService.Show();
    }

    protected override async Task OnInitializedAsync()
    {
        _userAgent = await JsRuntime.InvokeAsync<string>("getUserAgent");
    }

}