import { ComponentChildren } from "preact";
import { Cycle, render_and_copy } from "./common.tsx";

const Msg = ({
    hash,
    children,
    bridge = " then",
    click_blue = "click blue",
}: {
    hash: string;
    children: ComponentChildren;
    bridge?: string;
    click_blue?: string;
}) => (
    <span>
        <a
            href={`#${hash}`}
            style={{
                fontWeight: "bold",
                textDecoration: "none",
                color: "#f26565",
                cursor: "pointer",
            }}
        >
            {children}
        </a>
        {bridge}{" "}
        <span
            style={{
                fontWeight: "bold",
                color: "rgb(87, 144, 251)",
                cursor: "pointer",
            }}
        >
            {click_blue}
        </span>
    </span>
);

render_and_copy(
    <Cycle width_px={480} height_px={50}>
        <span>
            here's how this works:{" "}
            <Msg hash="Good job!" bridge=", then you">
                you click red
            </Msg>
        </span>
        <Msg hash="Good job, again!" bridge=", then">
            click red
        </Msg>
        <span>
            one more time.{" "}
            <Msg hash="Hello!" bridge=", then">
                click red
            </Msg>
            , no matter what.
        </span>
        <Msg hash="Hello?" bridge=" then " click_blue="click me and let's go">
            got it? did you click this too?
        </Msg>
        <Msg
            hash="Hello??"
            bridge=" ... "
            click_blue="yeah, sorry. bit of a slip-up!"
        >
            um... "me?"
        </Msg>
        <Msg
            hash="Are you even seeing this?"
            bridge=" ... "
            click_blue="i'm sorry"
        >
            it's... fine. don't sweat it, blue.
        </Msg>
        <Msg hash="Oh right." bridge=" ... " click_blue="...">
            whatever. we can still salvage this. probably.
        </Msg>
        <Msg
            hash="You care more about these dumb colors."
            bridge=" ... "
            click_blue="getting clicked?"
        >
            let's just... what were we even doing?
        </Msg>
        <Msg
            hash="You know, they really weren't meant to be a TIHYLtTW reference."
            bridge=" ... "
            click_blue="well we can't talk if we aren't clicked"
        >
            yeah, yeah of course. but why??
        </Msg>
        <Msg
            hash="Even though 'mehbark' did read that novella a while ago."
            bridge=" ... "
            click_blue="okay, okay. sheesh, calm down!"
        >
            that's not a reason!
        </Msg>
        <Msg
            hash="They liked it! But that's irrelevant, red and blue just came to mind."
            bridge=" ... "
            click_blue="you're right"
        >
            don't tell me to c- you know what, let's not.
        </Msg>
    </Cycle>
);