import ClassName from 'classnames';
import omit from 'lodash/omit';
import React from 'react';

import './WidgetToolbar.scss';

export const WidgetToolbar = (props) => {
  const className = ClassName('WidgetToolbar', props.className, {
    left: !props.right,
    right: props.right,
  });
  return (
    <div className={className}>
      {props.children}
    </div>
  );
};

const WidgetToolbarItem = (props, ref) => {
  const className = ClassName('WidgetToolbarItem', props.className, {
    danger: props.danger,
  });

  const finalProps = {
    ...omit(props, ['className', 'danger', 'ref']),
    className: className,
  };

  return (
    <div ref={ref} {...finalProps}>
      {props.children}
    </div>
  );
};

WidgetToolbar.Item = React.forwardRef(WidgetToolbarItem);
WidgetToolbar.Item.displayName = 'WidgetToolbarItem';
