const preact = require('preact');

module.exports = function circle(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 198.13 199.94" >
                <ellipse class={colours[0]} cx="100" cy="100" rx="30" ry="30"/>
                <ellipse class={colours[0]} cx="100" cy="100" rx="60" ry="60"/>
                <ellipse class={colours[0]} cx="100" cy="100" rx="90" ry="90"/>
            </svg>
        );
    }

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

            <ellipse clip-path="url(#firstColour)" class={colours[0]} cx="100" cy="100" rx="30" ry="30"/>
            <ellipse clip-path="url(#firstColour)" class={colours[0]} cx="100" cy="100" rx="60" ry="60"/>
            <ellipse clip-path="url(#firstColour)" class={colours[0]} cx="100" cy="100" rx="90" ry="90"/>

            <ellipse clip-path="url(#secondColour)" class={colours[1]} cx="100" cy="100" rx="30" ry="30"/>
            <ellipse clip-path="url(#secondColour)" class={colours[1]} cx="100" cy="100" rx="60" ry="60"/>
            <ellipse clip-path="url(#secondColour)" class={colours[1]} cx="100" cy="100" rx="90" ry="90"/>
        </svg>
    );
};
