import React, { CSSProperties } from 'react';
import { st, classes } from './MultipleDragOverlayEffect.st.css.js';

export interface MultipleDragOverlayEffectProps {
  style?: CSSProperties;
  className?: string;
}

export function MultipleDragOverlayEffect(
  props: MultipleDragOverlayEffectProps,
) {
  const { style: styleProp = {} } = props;
  const { height, width, opacity } = styleProp;
  return (
    <div
      {...props}
      className={st(classes.root, {}, props.className)}
      data-hook="multiple-drag-overlay-effect"
      style={{
        height,
        width,
        opacity,
      }}
    />
  );
}