import { component$, useTask$ } from "@builder.io/qwik";
import { useNanostore$ } from "~/hooks/nanostores";
import { userInfo } from "~/lib/stores";
import { StereoUser } from "~/lib/types";

export default component$(() => {
    const greetings = [
        "what's on the agenda today, <username>?",
        "what's on your mind, <username>?",
        "what's the plan, <username>?",
        "ready to rock, <username>?",
        "what's brewing, <username>?",
        "what's the latest, <username>?",
        "how's your day going, <username>?",
        "need some inspiration, <username>?",
        "let's make some noise, <username>!",
        "welcome back, <username>!",
        "good to see you, <username>!",
        "what are we making today, <username>?",
        "time to make some magic, <username>!",
        "let's get creative, <username>!",
        "what's the vibe today, <username>?",
        "let's create something awesome, <username>!",
        "what's the next big thing, <username>?",
        "let's turn ideas into reality, <username>!",
        "let's see your next masterpiece, <username>!",
        "let's make some art, <username>!",
        "what's the next hit, <username>?",
        "let's make some music, <username>!",
        "let's make some waves, <username>!",
        "what brilliance awaits, <username>?",
        "ready to brainstorm, <username>?",
        "let's bring ideas to life, <username>!",
        "don't get any ideas, <username>...",
        "let's try this again, <username>!",
        "let's get this party started, <username>!",
        "let's make something unforgettable, <username>!",
    ]

    const greeting = greetings[Math.floor(Math.random() * greetings.length)];
    const user = useNanostore$<StereoUser>(userInfo);

    const splits = greeting.split("<username>");

    useTask$(({ track }) => {
        track(() => user.value);
    })
    
    return (
        <div class="rounded-lg">
            <p class="font-medium text-4xl text-stereo/45">
                {splits[0]}
                <span class="text-stereo">
                    @{user.value?.username || "..."}
                </span>
                {splits[1]}
            </p>
        </div>
    )
})