import React, { forwardRef, FunctionComponent } from "react";
import classNames from "classnames";
import { Box, BoxProps } from "../Box";
import { THEME } from "../../types";
import { bem } from "../../utilities/bem";

const cn = "PopoverMenu";

export interface PopoverMenuProps extends BoxProps {
  hidden?: boolean;
  theme?: THEME;
}

export const PopoverMenu: FunctionComponent<PopoverMenuProps> = forwardRef<
  HTMLDivElement,
  PopoverMenuProps
>((props, ref) => {
  const { children, className, hidden, theme = THEME.PRODUCT, ...rest } = props;

  return (
    <Box
      ref={ref}
      {...rest}
      className={classNames(
        bem(cn),
        bem(cn, { m: theme }),
        hidden && "hidden",
        className,
      )}
    >
      {children}
    </Box>
  );
});