import SearchResult_Item from 'src/components/blocks/searchResults/searchResult_Item.tsx';
import searchStyles from 'src/components/blocks/searchResults/searchResults.module.css';

interface SearchResult_Props {
  success: boolean;
  posts: any;
  loading: boolean;
}

export default function SearchResult_List(props: SearchResult_Props) {
  // ================================================================ //
  // LOADING //
  // ================================================================ //
  if(props.loading) {
    return (
      <div className={searchStyles.showingResults_Message_Ctn}>
        <h2>Loading...</h2>
      </div>
    )
  }

  // ================================================================ //
  // NO Search Results //
  // ================================================================ //
  if(props.posts.length < 1 || props.success == false) {
    return (
      <div className={searchStyles.showingResults_Message_Ctn}>
        <h2>No Search Results.</h2>
      </div>
    )
  }

  return(
    <div className={searchStyles.searchResult_List_Ctn}>
      {/* ================================================================
      // Search Results List // 
      ================================================================ */}
      {props.posts.map((post: any) => (
        <div key={post.ID}>
          <SearchResult_Item post={post} />
        </div>
      ))}
    </div>
  )
};