import { createElement } from "react";
/**
 * External dependencies
 */
import classnames from 'classnames';

/**
 * Internal dependencies
 */
import { ALIGNMENTS, getAlignmentIndex } from './utils';
import { Root, Cell, Point } from './styles/alignment-matrix-control-icon-styles';
const BASE_SIZE = 24;
function AlignmentMatrixControlIcon({
  className,
  disablePointerEvents = true,
  size = BASE_SIZE,
  style = {},
  value = 'center',
  ...props
}) {
  const alignIndex = getAlignmentIndex(value);
  const scale = (size / BASE_SIZE).toFixed(2);
  const classes = classnames('component-alignment-matrix-control-icon', className);
  const styles = {
    ...style,
    transform: `scale(${scale})`
  };
  return createElement(Root, {
    ...props,
    className: classes,
    disablePointerEvents: disablePointerEvents,
    role: "presentation",
    style: styles
  }, ALIGNMENTS.map((align, index) => {
    const isActive = alignIndex === index;
    return createElement(Cell, {
      key: align
    }, createElement(Point, {
      isActive: isActive
    }));
  }));
}
export default AlignmentMatrixControlIcon;
//# sourceMappingURL=icon.js.map