@props([
    'variant' => 'desktop',
    'placeholder' => 'Search Courses, Test Series, Notes...',
])

@php
    $searchId = 'headerSearch-' . $variant;
@endphp

<div class="ht-header__search-wrapper {{ $variant === 'mobile' ? 'ht-header__search-wrapper--mobile' : '' }}">

    <label
        for="{{ $searchId }}"
        class="visually-hidden">

        Search

    </label>

    <button
        type="button"
        class="ht-header__search-btn"
        aria-label="Search">

        <i class="bi bi-search" aria-hidden="true"></i>

    </button>

    <input
        id="{{ $searchId }}"
        type="search"
        name="keyword"
        class="ht-header__search-input"
        placeholder="{{ $placeholder }}"
        autocomplete="off"
        spellcheck="false"
        aria-label="Search courses, test series and notes">

</div>