// //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/logger/logs/stream?service=ocme-count&level=info`;

//         es = new EventSource(url);
//         es.onopen = () => console.log(">>> Connection opened!");
//         es.onerror = (e) => console.log("ERROR!", e);
//         es.onmessage = (e) => {
//             const data = JSON.parse(e.data);

//             console.log(e);
//             console.log(data);
//             switch (data.type) {
//                 case "time-update":
//                     console.log(data);
//                     break;
//                 case "error":
//                     console.log(data);
//                     break;
//                 case "done":
//                     console.log(data);
//                     es.close(); // Close the connection when done

//                     break;
//                 default:
//                     break;
//             }
//         };

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