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 202.69 177.29" >
                <polygon class={colours[0]} points="1.77,176.25 100.7,2.08 200.9,176.25   "/>
                <polygon class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23   "/>
                <polygon class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21   "/>
                <polygon class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19  "/>
                <polygon class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17  "/>
            </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="1.77,176.25 100.7,2.08 200.9,176.25 	"/>
        	<polygon clip-path="url(#firstColour)" class={colours[0]} points="23.99,163.23 100.78,28.05 178.54,163.23 	"/>
        	<polygon clip-path="url(#firstColour)" class={colours[0]} points="46.21,150.21 100.85,54.03 156.18,150.21 	"/>
        	<polygon clip-path="url(#firstColour)" class={colours[0]} points="68.43,137.19 100.92,80 133.82,137.19 	"/>
        	<polygon clip-path="url(#firstColour)" class={colours[0]} points="90.65,124.17 100.99,105.98 111.46,124.17 	"/>

            <polygon clip-path="url(#secondColour)" class={colours[1]} points="1.77,176.25 100.7,2.08 200.9,176.25   "/>
            <polygon clip-path="url(#secondColour)" class={colours[1]} points="23.99,163.23 100.78,28.05 178.54,163.23   "/>
            <polygon clip-path="url(#secondColour)" class={colours[1]} points="46.21,150.21 100.85,54.03 156.18,150.21   "/>
            <polygon clip-path="url(#secondColour)" class={colours[1]} points="68.43,137.19 100.92,80 133.82,137.19  "/>
            <polygon clip-path="url(#secondColour)" class={colours[1]} points="90.65,124.17 100.99,105.98 111.46,124.17  "/>
        </svg>
    );
};