import { useEffect, useState } from "react";
import Marquee from "react-fast-marquee";

import pasta from "./pasta.ts";
import style from "./style.module.css";

export default function Footer() {
    const [index, setIndex] = useState(0);

    // random shitpost every minute
    useEffect(() => {
        const timer = setInterval(() => {
            setIndex(Math.floor(Math.random() * pasta.length));
            console.log("sus!");
        }, 60 * 1000);
        return () => {
            clearInterval(timer);
        };
    }, []);

    const text = pasta[index];

    return (
        <div className={style.container}>
            <div className={style.taskbar}>
                <div className={style.startButton}>
                    <img
                        className={style.startIcon}
                        src="src/assets/weed.png"
                        alt="4:20"
                    />
                    Start
                </div>
                <span className={style.divider}></span>
                <div className={style.windows}>
                    <span className={style.window}>🧹 Flatastic</span>
                    <span className={style.window}>🚊 Timetable</span>
                    <span className={style.window}>🏠 HomeAssistant</span>
                </div>
            </div>

            <div className={style.newsticker}>
                <div className={style.info}>BREAKING</div>
                <div className={style.marquee}>
                    <Marquee>{text}</Marquee>
                </div>
            </div>
        </div>
    );
}