"use client";

import { useParams } from "next/navigation";
import { useTranslation } from "react-i18next";

import Search from "@/features/search";
import SEO from "@/components/shared/SEO";
import { useSearch } from "@/context/helpers/search";

export default function SearchPage() {
  const { t: h } = useTranslation("header");
  const params = useParams();
  const keyword = params?.keyword ? decodeURIComponent(params.keyword) : "";
  const { totalCount } = useSearch();

  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"}
        type="website"
      />

      <Search />
    </>
  );
}