---
import { Search as SearchIcon } from '@images/components'
import Search from './Search.tsx'
---

<button id="search-button" type="button" title="Search" class="searchButton">
  <SearchIcon />
</button>

<Search client:only="react" />

<script>
  import { isSearchOpen } from '@stores/search'
  const button = document.querySelector('#search-button')

  isSearchOpen.subscribe((value) =>
    document.body.classList.toggle('hasSearchOpen', value)
  )

  button?.addEventListener('click', () => isSearchOpen.set(!isSearchOpen.get()))
</script>

<style>
  .searchButton:focus {
    outline: 0;
  }

  .searchButton svg {
    stroke: var(--text-color-light);
    width: 24px;
    height: 24px;
  }

  .searchButton:hover svg,
  .searchButton:focus svg {
    stroke: var(--link-color);
  }

  :global(.hasSearchOpen) {
    overflow: hidden;
  }
</style>