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

export function Browse() {
  const { t } = useI18n();
  const [sp] = useSearchParams();
  const q = sp.get("q") || "";
  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={q ? `${t("search")}: ${q}` : t("all")}
          viewAllTo="/browse"
          viewAllLabel={t("viewAll")}
        />
      </div>
      <MessageStream scope={{ kind: "all" }} />
    </section>
  );
}