import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { isNil } from 'ramda';
import mapResponsiveProperty from '../utils/mapResponsiveProperty';
import * as Types from '../types';
import Box from '../Box';
import useTheme from '../hooks/useTheme';

const spanToWidth = maxColumns => columnSpan => columnSpan / maxColumns;

const Col = /*#__PURE__*/forwardRef((_ref, ref) => {
  let {
    span,
    maxColumns: maxColumnsProp
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["span", "maxColumns"]);

  const {
    grid: {
      gutters,
      maxColumns
    } = {}
  } = useTheme();
  return /*#__PURE__*/React.createElement(Box, _extends({
    ref: ref,
    px: gutters,
    width: mapResponsiveProperty(spanToWidth(isNil(maxColumnsProp) ? maxColumns : maxColumnsProp), span)
  }, rest));
});
Col.displayName = 'Col';
process.env.NODE_ENV !== "production" ? Col.propTypes = {
  maxColumns: PropTypes.number,
  span: Types.responsiveNumber
} : void 0;
export default Col;