---
import { sanitizeContentBody } from '../../lib/sanitize';

interface Props {
  q: string;
  hasQuery: boolean;
  hits: Array<{ slug: string; title: string; snippetHtml?: string | null }>;
  nextHref: string | null;
}

const { q, hasQuery, hits, nextHref } = Astro.props;
---
<section class="section search-page">
  <h1>Search</h1>
  <form class="search-form" action="/search" method="get" role="search">
    <label class="search-form__label" for="site-search-q">Search</label>
    <div class="search-form__row">
      <input
        id="site-search-q"
        class="search-form__input"
        type="search"
        name="q"
        value={q}
        autocomplete="off"
      />
      <button type="submit" class="search-form__submit">Search</button>
    </div>
  </form>

  {
    hasQuery ? (
      hits.length > 0 ? (
        <ol class="search-results">
          {hits.map((hit) => (
            <li class="search-result">
              <a class="search-result__title" href={`/post/${hit.slug}`}>
                {hit.title}
              </a>
              {hit.snippetHtml ? (
                <span class="cms-body search-result__snippet" set:html={sanitizeContentBody(hit.snippetHtml)} />
              ) : null}
            </li>
          ))}
        </ol>
      ) : (
        <p class="search-empty">No matches for that query.</p>
      )
    ) : null
  }

  {nextHref ? (
    <p class="search-pagination">
      <a href={nextHref}>Next page</a>
    </p>
  ) : null}
</section>