window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    setRender(Math.random());
});

function useFirstRender() {
    const ref = React.useRef(true);
    const firstRender = ref.current;
    ref.current = false;
    return firstRender;
}

function SmorsleHeader(props) {


    var imgStub = new Array(50);
    imgStub.fill(0, 0, 50);

    var image = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? "smr-dark" : "smr";

    return (
        <div className="today">
            <div className="todaySliding">
                <div className="sliding-background">
                    <div className="photobanner">
                        {
                            imgStub.map(() => {
                                return (<img key={Math.random()} src={`/Resources/Images/${image}.png`} alt="" />)
                            })
                        }
                    </div>
                </div>
                <div className="sliding-background">
                    <div className="photobanner">
                        {
                            imgStub.map(() => {
                                return (<img key={Math.random()} src={`/Resources/Images/${image}.png`} alt="" />)
                            })
                        }
                    </div>
                </div>
                <div className="sliding-background">
                    <div className="photobanner">
                        {
                            imgStub.map(() => {
                                return (<img key={Math.random()} src={`/Resources/Images/${image}.png`} alt="" />)
                            })
                        }
                    </div>
                </div>
                <div className="sliding-background">
                    <div className="photobanner">
                        {
                            imgStub.map(() => {
                                return (<img key={Math.random()} src={`/Resources/Images/${image}.png`} alt="" />)
                            })
                        }
                    </div>
                </div>
            </div>

            {
                props.noText ?
                (<></>) :
                <>
                    <div className="todayText">
                        <h1>Where Art Meets Play</h1>
                        <h2>Dive Into Creativity With Smorsles</h2>
                    </div>
                </>
            }

        </div>
    )
}