import { Outlet } from "react-router-dom";
import { useTranslation } from "react-i18next";

import { SearchPanel } from "./search-panel";
import { useDocumentTitle } from "../lib/use-document-title";
import { useBreadcrumb } from "../shell/use-breadcrumb";
import { PageTitle } from "@/components/ui/page-title";

export function SearchPage() {
  const { t } = useTranslation();

  useDocumentTitle(t("nav.search"));
  useBreadcrumb([{ label: t("nav.search") }]);

  return (
    <div className="flex h-full flex-col">
      <PageTitle className="px-4 pt-4 pb-2">{t("nav.search")}</PageTitle>
      <div className="grid flex-1 grid-cols-[24rem_1fr] overflow-hidden">
        <div className="overflow-hidden border-r">
          <SearchPanel />
        </div>
        <div className="overflow-hidden">
          <Outlet />
        </div>
      </div>
    </div>
  );
}
