import React, { useState } from "react";
import Typography from "./typography/Typography";
import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation";
import { useSearchViewModel } from "../searchResults/controller/searchResultsViewModel";
import { ArticleSearchResult } from "./ArticleSearchResult";
import { Loader } from "./Loader/Loader";
import { useTranslation } from "react-i18next";

export const SearchResultSection = () => {
  const store = useSearchStoreImplementation();
  const { searchResults, isLoading } = useSearchViewModel(store);
  const [t, i18next] = useTranslation()

  function getResults() {
    if (searchResults === undefined || searchResults?.data.length === 0) {
      return (
        <Typography
          fontWeightVariant="semibold"
          className="text-xl w-full text-center items-center py-3"
        >
          {t("searchResults.nothingFound")}.
        </Typography>
      );
    } else {
      const results = searchResults.data.map((searchItem) => (
        <ArticleSearchResult searchItem={searchItem} />
      ));
      return results;
    }
  }

  return (
    <div className="p-4 md:px-6 md:py-8">
      <div className="pb-2">
        <Typography fontWeightVariant="semibold" className="text-3xl">
          {t("searchResults.title")}
        </Typography>
        <Typography className="text-gray-300 text-sm">
        {t("searchResults.totalResults")}: {searchResults?.meta.total}
        </Typography>
      </div>
      <hr className="w-full border-gray-100" />
      <div className="divide divide-y divide-gray-100">{getResults()}</div>
    </div>
  );
};