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

import { ObjectList } from "./object-list";
import { ObjectDetail } from "./object-detail";

export function ObjectsPage() {
  const { t } = useTranslation();
  const { id } = useParams();

  return (
    <div className="grid h-full grid-cols-[20rem_1fr]">
      <div className="overflow-hidden border-r">
        <ObjectList />
      </div>
      <div className="overflow-hidden">
        {id ? (
          <ObjectDetail />
        ) : (
          <div className="flex h-full items-center justify-center p-4 text-sm text-neutral-400">
            {t("objects.selectPrompt")}
          </div>
        )}
      </div>
    </div>
  );
}