import type { ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { X } from "lucide-react";

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

/** A right-sliding Base UI Drawer for a master/detail "detail" on narrow viewports.
 *  Provides the close affordance + an accessible dialog name; the caller supplies the content. */
export function DetailDrawer({
  open,
  onClose,
  ariaLabel,
  children,
}: {
  open: boolean;
  onClose: () => void;
  ariaLabel: string;
  children: ReactNode;
}) {
  const { t } = useTranslation();

  return (
    <Drawer
      open={open}
      onOpenChange={(next) => {
        if (!next) onClose();
      }}
      swipeDirection="right"
    >
      <DrawerContent aria-label={ariaLabel}>
        <div className="flex justify-end border-b p-2">
          <DrawerClose
            aria-label={t("actions.closeDetail")}
            render={<Button variant="ghost" size="icon-sm" />}
          >
            <X className="size-4" aria-hidden="true" />
          </DrawerClose>
        </div>
        <div className="flex-1 overflow-auto">{children}</div>
      </DrawerContent>
    </Drawer>
  );
}
