//import {useEffect, useState} from "react";
import {LstCard} from "../extendedUI/LstCard";
import {CardContent, CardHeader} from "../ui/card";
import {Skeleton} from "../ui/skeleton";
import {Button} from "../ui/button";
import {toast} from "sonner";

export default function CycleCountLog() {
    //const [logs, setLogs] = useState([]);
    //const [streaming, setStreaming] = useState(false); // Track if streaming is active

    // useEffect(() => {
    //     // Start streaming when the button is clicked
    //     let es;

    //     es = new EventSource("http://localhost:4000/api/logger/logs/stream?service=ocme-count&level=info");
    //     es.onopen = () => console.log(">>> Connection opened!");
    //     es.onerror = (e) => console.log("ERROR!", e);
    //     es.onmessage = (e) => {
    //         console.log(">>>", JSON.stringify(e));
    //     };

    //     return () => es.close();
    // }, []); // Effect runs when `streaming` state changes

    // const handleStartStreaming = () => {
    //     setStreaming(true); // Start streaming when button is clicked
    // };
    return (
        <LstCard className="w-48">
            <CardHeader className="flex justify-center">
                <span>Cycle Count logs</span>
            </CardHeader>
            <CardContent>
                {Array(10)
                .fill(0)
                .map((_, i) => (
                    <div key={i}>
                        <Skeleton className="m-2 h-4" />
                    </div>
                ))}
            </CardContent>
            <Button onClick={() => toast.success("SOmething")}>Start Stream</Button>
        </LstCard>
    );
}