const preact = require('preact');

module.exports = function triangle(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 200 200" >
                <polygon class={colours[0]} points="10,190    100,10   190,190"/>
                <polygon class={colours[0]} points="40,170    100,50   160,170"/>
                <polygon class={colours[0]} points="70,150    100,90   130,150"/>
            </svg>
        );
    }

    return (
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 202.69 177.29" >
            <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>

            <polygon clip-path="url(#firstColour)" class={colours[0]} points="10,190    100,10   190,190"/>
            <polygon clip-path="url(#firstColour)" class={colours[0]} points="40,170    100,50   160,170"/>
            <polygon clip-path="url(#firstColour)" class={colours[0]} points="70,150    100,90   130,150"/>

            <polygon clip-path="url(#secondColour)" class={colours[1]} points="10,190    100,10   190,190"/>
            <polygon clip-path="url(#secondColour)" class={colours[1]} points="40,170    100,50   160,170"/>
            <polygon clip-path="url(#secondColour)" class={colours[1]} points="70,150    100,90   130,150"/>
        </svg>
    );
};
