import _defineProperty from "@babel/runtime/helpers/defineProperty";
import cx from 'classnames';
import React, { forwardRef } from 'react';
import theme from './theme.css';
var Grid = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var _cx;

  var children = _ref.children,
      areas = _ref.areas,
      rows = _ref.rows,
      columns = _ref.columns,
      _ref$gap = _ref.gap,
      gap = _ref$gap === void 0 ? 0 : _ref$gap,
      _ref$columnGap = _ref.columnGap,
      columnGap = _ref$columnGap === void 0 ? 0 : _ref$columnGap,
      _ref$rowGap = _ref.rowGap,
      rowGap = _ref$rowGap === void 0 ? 0 : _ref$rowGap;
  var classNames = cx(theme['grid'], (_cx = {}, _defineProperty(_cx, theme["gap-".concat(gap)], gap > 0), _defineProperty(_cx, theme["column-gap-".concat(columnGap)], columnGap > 0), _defineProperty(_cx, theme["row-gap-".concat(rowGap)], rowGap > 0), _cx));
  var gridStyles = {
    gridTemplateAreas: areas === null || areas === void 0 ? void 0 : areas.map(function (area) {
      return "\"".concat(area, "\"");
    }).join(' '),
    gridTemplateRows: rows === null || rows === void 0 ? void 0 : rows.join(' '),
    gridTemplateColumns: columns === null || columns === void 0 ? void 0 : columns.join(' ')
  };
  return /*#__PURE__*/React.createElement("div", {
    className: classNames,
    style: gridStyles,
    ref: ref
  }, children);
});
Grid.displayName = 'Grid';
export default Grid;