const preact = require('preact');

module.exports = function square(colours) {
    if (colours.length === 1) {
        return (
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                 viewBox="0 0 199.33 199.99" >
                <rect x="10" y="10" class={colours[0]} width="180" height="180"/>
                <rect x="70" y="70" class={colours[0]} width="120" height="120"/>
                <rect x="130" y="130" class={colours[0]} width="60" height="60"/>
            </svg>
        );
    }

    return (
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
             viewBox="0 0 199.33 199.99" >
            <clipPath id="firstColour">
                <rect x="0" y="0" width="100" height="200" />
            </clipPath>
            <clipPath id="secondColour">
                <rect x="100" y="0" width="100" height="200" />
            </clipPath>

            <rect clip-path="url(#firstColour)" x="1.47" y="1.47" class={colours[0]} width="196.39" height="197.05"/>
            <rect clip-path="url(#firstColour)" x="21.63" y="22.22" class={colours[0]} width="156.07" height="155.55"/>
            <rect clip-path="url(#firstColour)" x="42.12" y="42.64" class={colours[0]} width="115.09" height="114.71"/>
            <rect clip-path="url(#firstColour)" x="62.61" y="63.06" class={colours[0]} width="74.11" height="73.86"/>
            <rect clip-path="url(#firstColour)" x="83.1" y="83.48" class={colours[0]} width="33.13" height="33.02"/>

            <rect clip-path="url(#secondColour)" x="1.47" y="1.47" class={colours[1]} width="196.39" height="197.05"/>
            <rect clip-path="url(#secondColour)" x="21.63" y="22.22" class={colours[1]} width="156.07" height="155.55"/>
            <rect clip-path="url(#secondColour)" x="42.12" y="42.64" class={colours[1]} width="115.09" height="114.71"/>
            <rect clip-path="url(#secondColour)" x="62.61" y="63.06" class={colours[1]} width="74.11" height="73.86"/>
            <rect clip-path="url(#secondColour)" x="83.1" y="83.48" class={colours[1]} width="33.13" height="33.02"/>
        </svg>
    );
}