import React from "react";
import PropTypes from "prop-types";
import MachineLog from "./MachineLog";
import Typography from "@mui/material/Typography";
import { useSensitiveInfo } from "../../../../hooks";

const MachineDescription = ({ description }) => {
  return (
    <div
      style={{
        display: "flex"
      }}
    >
      <Typography
        variant="body2"
        sx={{
          marginRight: "4px"
        }}
        color="textSecondary"
      >
        {"Description:"}
      </Typography>
      <Typography variant="body2" color="textSecondary">
        {description}
      </Typography>
    </div>
  );
};

MachineDescription.propTypes = {
  description: PropTypes.string
};

const MachineCollapsedContent = ({ description, logs, style }) => {
  const { mask } = useSensitiveInfo();
  return (
    <div style={style}>
      <MachineLog logs={logs} />
      {description && <MachineDescription description={mask(description)} />}
    </div>
  );
};

MachineCollapsedContent.propTypes = {
  logs: PropTypes.array.isRequired,
  description: PropTypes.string,
  style: PropTypes.object
};

export default MachineCollapsedContent;
