import React from "react";
import compileClassNames from "../../../libraries/compileClassNames";
import style from "./Grid.module.css";

export default class GridSkeleton extends React.Component {
  render() {
    let {
      tagName = "div",
      customClassName = {},
      inlineGrid,
      justifyContent,
      align,
      rowGap,
      columnGap,
      children,
      tagAttributeProps
    } = this.props;
    let classes = compileClassNames(
      {
        [style.grid]: !inlineGrid,
        [style.inlineGrid]: !!inlineGrid,
        [style[rowGap]]: !!rowGap,
        [style[columnGap]]: !!columnGap,
        [style[justifyContent]]: !!justifyContent,
        [style[align]]: !!align
      },
      {
        [customClassName.grid]: !!customClassName.grid,
        [customClassName.rowGap]: !!customClassName.rowGap,
        [customClassName.columnGap]: !!customClassName.columnGap,
        [customClassName.justifyContent]: !!customClassName.justifyContent,
        [customClassName.align]: !!customClassName.align
      }
    );
    return React.createElement(tagName, {
      children,
      className: classes,
      ...tagAttributeProps
    });
  }
}
