---
import react from "@astrojs/react";
import Typewriter from "typewriter-effect";

var headerStrings = [
        `Access to the web <br /> for the masses`,
        `An open web for business`,
        `Web3 for the masses`,
        `Web3 for you`,
    ],
    randomString =
        headerStrings[Math.floor(Math.random() * headerStrings.length)];
function lastWord(words) {
    var n = words.split(" ");
    return n[n.length - 1];
}
var lastIndex = randomString.lastIndexOf(" ");
---

<Typewriter client:load />
<div>
    <Typewriter
        options={{ cursor: "_" }}
        onInit={(typewriter) => {
            typewriter
                .changeDelay(50)
                .typeString(`${randomString.substring(0, lastIndex)}` + " ")
                .start();
            typewriter.typeString(
                `<span class="header-alt">${lastWord(randomString)}</span>`
            );
        }}
    />
</div>