import React, { useRef, useEffect } from "react";
import { Box, Typography } from "@mui/material";

/**
 * A reusable component for displaying logs with auto-scrolling and styling
 *
 * @param {Object} props - Component props
 * @param {Array<string>} props.logs - Array of log messages to display
 * @param {number} props.height - Height of the log container in pixels (default: 300)
 * @param {Object} props.containerStyle - Additional styles for the container
 * @returns {JSX.Element} Log display component
 */
const LogDisplay = ({ logs = [], height = 300, containerStyle = {} }) => {
  const logsEndRef = useRef(null);

  // Auto-scroll logs to bottom when new logs are added
  useEffect(() => {
    if (logsEndRef.current) {
      logsEndRef.current.scrollIntoView({ behavior: "smooth" });
    }
  }, [logs]);

  return (
    <Box
      sx={{
        mt: 3,
        width: "100%",
        height: `${height}px`,
        overflowY: "auto",
        backgroundColor: "#f9f9f9",
        p: 2,
        borderRadius: 1,
        fontFamily: "monospace",
        fontSize: "0.85rem",
        border: "1px solid #e0e0e0",
        ...containerStyle,
      }}
    >
      {logs.length === 0 ? (
        <Typography color="text.secondary" variant="body2">
          Waiting for logs...
        </Typography>
      ) : (
        logs.map((log, index) => {
          // Style logs based on content
          let style = { opacity: 0.7 };
          if (log.includes("[ERROR]")) {
            style = { ...style, color: "#d32f2f" }; // Red for errors
          } else if (log.includes("[WARN]")) {
            style = { ...style, color: "#ed6c02" }; // Orange for warnings
          } else if (log.includes("[SUCCESS]")) {
            style = { ...style, color: "#2e7d32", opacity: 0.8 }; // Green for success
          }

          return (
            <div key={index} style={{ ...style, marginBottom: "4px" }}>
              {log}
            </div>
          );
        })
      )}
      <div ref={logsEndRef} />
    </Box>
  );
};

export default LogDisplay;