import React, { useState, useEffect } from "react";
import { Typography } from "@material-ui/core";

export const MemoryUsage = () => {
    const [memoryUsage, setMemoryUsage] = useState("Loading...");

    useEffect(() => {
        function updateMemoryUsage() {
            if (performance.memory) {
                const memoryInfo = performance.memory;
                const usedMB = (memoryInfo.usedJSHeapSize / 1024 / 1024).toFixed(2);
                setMemoryUsage(`Used: ${usedMB} MB`);
            } else {
                setMemoryUsage("Memory info not supported in this browser.");
            }
        }

        const interval = setInterval(updateMemoryUsage, 1000);
        return () => clearInterval(interval); // Cleanup on unmount
    }, []);

    return (
        <Typography color="textPrimary" component="div">
            <h2>Client-Side Memory Usage</h2>
            <p style={{ fontSize: "1.2em", fontWeight: "bold" }}>{memoryUsage}</p>
        </Typography>
    );
};