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

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

interface IArrowProps {
  /** Required */
  direction: Direction;

  /** Optional */
  className?: string;
  style?: object;
}

export const Arrow = ({
  direction,
  className,
  style,
}: IArrowProps) => (
  <span
    className={classNames("arrow", {
      [`arrow--${_.lowerCase(direction)}`]: direction,
      [className]: className,
    })}
    {...style && { style }}
  />
)