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

const cn = bemHOF("Flex");

/**
 * @deprecated use the “flex” classname instead
 */
export const Flex: FunctionComponent<BoxProps> = forwardRef<
  HTMLDivElement,
  BoxProps
>(({ className, ...rest }, ref) => (
  <Box className={classNames([cn(), className])} ref={ref} {...rest} />
));