import Search from "@/features/search";
import SEO from "@/components/shared/SEO";
import { useHome } from "@/context/helpers/Home/HomeContext";
import { useRouter } from "next/router";
import { useTranslation } from "react-i18next";
import { useSearch } from "@/context/helpers/search";

export default function SearchPage() {
  const { t: h } = useTranslation("header");
  const router = useRouter();
  const { keyword } = router.query;
  const { companyData } = useHome();
  const { totalCount } = useSearch();

  const baseUrl =
    typeof window !== "undefined"
      ? window.location.origin
      : companyData?.domain
        ? `https://${companyData.domain}`
        : "";
  const searchUrl = `${baseUrl}${router.asPath}`;
  const searchTitle = keyword
    ? `${h("search.results", { defaultValue: "Search results for" })}: "${keyword}"`
    : h("search.title", { defaultValue: "Search Products" });
  const searchDescription = keyword
    ? `${h("search.results", { defaultValue: "Search results for" })} "${keyword}". ${totalCount || 0} ${h("search.productsFound", { defaultValue: "products found" })}.`
    : h("search.seo.description", {
        defaultValue: "Search for products in our store",
      });

  return (
    <>
      <SEO
        title={searchTitle}
        description={searchDescription}
        keywords={keyword ? `${keyword}, search, products` : "search, products"}
        url={searchUrl}
        type="website"
      />

      <Search />
    </>
  );
}