import React from "react";
import * as Iso from "@eno/iso";

/*
const delay =(inMS:number)=>
{
    return new Promise((accept)=>
    {
        setTimeout(()=>
        {
            accept({default:()=>
            {
                return <h1>loooooool</h1>;
            }});
        }, inMS);
    });
}
const LOL = React.lazy(()=>delay(3000));
*/

const Comp = React.lazy(()=>import("./deep/component.tsx"));


export default ()=>
{

    const [stack] = React.useContext(Iso.Meta.Context);

    return <div class="p-4 font-sans">
        <Iso.Meta.Metas title="Main Page!" description="its great"/>
        <nav class="p-4">
            <a class="text-red-500" href="/">Home</a>
            <a href="/about">About</a>
        </nav>

        <h1 class="my-2 font(bold serif) text(3xl)">Title!!</h1>
        <h2>suspended:</h2>
        <React.Suspense fallback={<div>Loading!</div>}>
            <Comp/>
        </React.Suspense>
        <Iso.Switch>
            <Iso.Case value="/">
                <p>thing1</p>
                <p>thing2</p>
            </Iso.Case>
            <Iso.Case value="page">
                <Iso.Switch>
                    <Iso.Case value="about-us">
                        <>
                            <Iso.Meta.Metas title="About US" concatListed=" | "/>
                            About us!
                        </>
                    </Iso.Case>
                    <Iso.Case default>sorry no page</Iso.Case>
                </Iso.Switch>
            </Iso.Case>
            <Iso.Case value="lol/idk">lol/idk</Iso.Case>
            <Iso.Case default>
                <>
                    <Iso.Meta.Metas description="a 404 has occurred"/>
                    <p>404!</p>
                </>
            </Iso.Case>
        </Iso.Switch>
    </div>;
};