import * as classNames from "classnames";
import * as React from "react";

import { Direction } from "../../utilities/units";

export interface IFloatProps {
  children: any;
  pins?: Direction[];
  centerX?: boolean;
}

export const Float = ({
  children,
  pins = [],
  centerX,
}: IFloatProps) => (
  <div
    className={classNames("float", {
      "float--right": pins.includes(Direction.Right),
      "float--left": pins.includes(Direction.Left),
      "float--up": pins.includes(Direction.Up),
      "float--down": pins.includes(Direction.Down),
      "float--center-x": centerX,
    })}
  >
    <div className="float__content">
      {children}
    </div>
  </div>
)