import React, { ReactNode, useEffect, useState } from "react";

const RenderWithoutJS = ({ children, profiles }: { children: ReactNode, profiles?}) => {
    let Mastodon = profiles.filter(p => p.platform === "Fediverse")[0]
    const [nojs, setNoJS] = useState(true)
    useEffect(() => setNoJS(false), [])
    return (
        <>
            <noscript>
                <div style={{
                    display: nojs ? "block" : "none",
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translateX(-50%)",
                    textAlign: "center"
                }}>
                    <span>
                        This site needs Javascript to run.
                        <br />
                        Please enable this Permission and reload this Page.
                    </span>
                </div>
            </noscript>

            {/* Mastodon Verification Link */}
            <a style={{ display: "none" }} rel="me" href={Mastodon.url}>
                {Mastodon.username}
            </a>
            {/* END */}
            {!nojs && (<>{children}</>)}
        </>

    );
};



export default RenderWithoutJS;