import React from "react"

import { ResourceHit } from "@/components/header/header-search/hit-comps"
import EmptyList from "@/components/empty-list"

import * as styles from "./index.module.scss"

function SearchResults({ resultList }: { resultList: IHit[] }) {
  return (
    <article className={styles.resultWrapper}>
      {resultList && resultList.length > 0 ? (
        resultList.map((hit: IHit, index: number) => (
          <div className="pb-6" key={hit.title + index.toString()}>
            <ResourceHit {...{ hit }} />
          </div>
        ))
      ) : (
        <div className={styles.emptyWrapper}>
          <EmptyList />
        </div>
      )}
    </article>
  )
}

export default SearchResults