import React, { Component } from 'react';
import { values } from '../values.config';

const SVG_PATH = values.svgPathGridIcon;
const SVG_VIEWBOX = values.svgPathGridIconViewBox || '0 0 30 30';

class PreviewGrid extends Component {
  render() {
    const { colour } = this.props;

    if (Array.isArray(SVG_PATH)) {
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox={SVG_VIEWBOX}>
          {SVG_PATH.map((p) => {
            return <path key={p.substring(0, 20)} d={p} fill={colour} />;
          })}
        </svg>
      );
    } else {
      return (
        <svg xmlns="http://www.w3.org/2000/svg" viewBox={SVG_VIEWBOX}>
          <path key={SVG_PATH.substring(0, 20)} d={SVG_PATH} fill={colour} />
        </svg>
      );
    }
  }
}

export default PreviewGrid;
