import classNames from "classnames/dedupe";
import type { FlexProps } from "./types";
import { buildFlexStyles, splitProps } from "./propUtils";
import "./Flex.css";

const Flex = ({ ref, ...props }: FlexProps) => {
  const {
    elementType: Element = "div",
    style,
    className,
    ...otherProps
  } = props;
  const classes = classNames("mobius", "mobius-flex", className);

  const [styleProps, restProps] = splitProps(otherProps);
  const flexStyles = buildFlexStyles(styleProps);

  return (
    <Element
      ref={ref}
      style={{
        ...flexStyles,
        ...style,
      }}
      className={classes}
      {...restProps}
    />
  );
};

Flex.displayName = "Flex";
export { Flex };
