bd

import type { FlexProps } from "@/root.config";
import { Flex } from "../layout/flex";

interface BackdropProps {
  children?: React.ReactNode;
  onClose?: () => void;
  justify?: FlexProps["justify"];
  items?: FlexProps["items"];
  direction?: FlexProps["direction"];
}
export function Backdrop({
  children,
  onClose,
  justify,
  items,
  direction,
}: BackdropProps) {
  return (
    <Flex
      direction={direction || "row"}
      items={items || "center"}
      justify={justify || "center"}
      className={"inset-0 fixed z-9999 overflow-hidden"}
    >
      <div
        onClick={() => onClose?.()}
        className="absolute inset-0 bg-black/50 backdrop-blur-[1px]"
      />
      {children}
    </Flex>
  );
}