import { useSearchParams } from "react-router-dom";
import { MessageStream } from "../../components/messageStream/MessageStream";
import { SectionHeader } from "../../components/SectionHeader";
import { useI18n } from "../../i18n";
import { isPopularTag } from "../../utils/popularTag";

export function Browse() {
  const { t, lang } = useI18n();
  const [sp] = useSearchParams();
  const q = sp.get("q") || "";
  const sort = sp.get("sort") || "";
  const tag = sp.get("tag") || "";
  const title = q
    ? `${t("search")}: ${q}`
    : isPopularTag(tag, lang)
      ? t("popular")
      : sort === "latest"
        ? t("latest")
        : sort === "recommended"
          ? t("official")
          : t("all");
  return (
    <section>
      <div className="mx-auto max-w-full px-4 md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
        <SectionHeader title={title} />
      </div>
      <MessageStream scope={{ kind: "all" }} />
    </section>
  );
}