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

import { Drawer, DrawerClose, DrawerContent } from "@/components/ui/drawer";

/**
 * Narrow-viewport object detail: the nested <Outlet/> inside a Base UI Drawer that
 * slides from the right. Lazy-loaded so Base UI's drawer code (swipe/snap machinery)
 * splits out of the main entry chunk — the wide pane path never pays for it.
 */
export function ObjectDetailDrawer({
  open,
  onClose,
}: {
  open: boolean;
  onClose: () => void;
}) {
  const { t } = useTranslation();

  return (
    <Drawer
      open={open}
      onOpenChange={(next) => {
        if (!next) onClose();
      }}
      swipeDirection="right"
    >
      <DrawerContent aria-label={t("objects.detailTitle")}>
        <div className="flex justify-end border-b p-2">
          <DrawerClose
            aria-label={t("actions.closeDetail")}
            className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
          >
            <X className="size-4" aria-hidden="true" />
          </DrawerClose>
        </div>
        <div className="flex-1 overflow-auto">
          <Outlet />
        </div>
      </DrawerContent>
    </Drawer>
  );
}