import {useSearchParams} from "react-router";
import {network} from "../network/network.ts";
import ResourcesView from "../components/resources_view.tsx";
import {useEffect} from "react";
import {useTranslation} from "react-i18next";

export default function SearchPage() {
  const [params, _] = useSearchParams()
  const { t } = useTranslation();

  const keyword = params.get("keyword")

  useEffect(() => {
    document.title = t("Search") + ": " + (keyword || "");
  }, [])

  if (keyword === null || keyword === "") {
    return <div role="alert" className="alert alert-info alert-dash">
      <span>{t("Enter a search keyword to continue")}</span>
    </div>
  }

  return <div key={keyword}>
    <h1 className={"text-2xl px-4 pt-4 font-bold my-2"}>{t("Search")}: {keyword}</h1>
    <ResourcesView loader={(page) => network.searchResources(keyword, page)}></ResourcesView>
  </div>
}