// //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";
// import {useEffect} from "react";

// 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;

//         const url = `http://localhost:4000/api/log`;

//         es = new EventSource(url, {withCredentials: true});
//         es.onopen = () => console.log(">>> Connection opened!");
//         es.onerror = (e) => console.log("ERROR!", e);
//         es.onmessage = (e) => {
//             console.log(">>>", JSON.stringify(e));
//         };

//         return () => es.close();
//     }, []);

//     // 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>
//     );
// }