// PrinterSelect.js
import PropTypes from "prop-types";
import { Progress, Flex, Space } from "antd";
import StateTag from "./StateTag";

const StateDisplay = ({ state, showProgress = true, showState = true }) => {
  const currentState = state || {
    type: "unknown",
    progress: 0,
  };

  return (
    <Flex gap="small" align={"center"}>
      {showState && (
        <Space>
          <StateTag state={currentState.type} />
        </Space>
      )}
      {showProgress && currentState?.percent > 0 ? (
        <Progress
          percent={Math.round(currentState.percent)}
          status="active"
          style={{ width: "150px", marginBottom: "2px" }}
        />
      ) : null}
    </Flex>
  );
};

StateDisplay.propTypes = {
  state: PropTypes.object,
  showProgress: PropTypes.bool,
  showState: PropTypes.bool,
};

export default StateDisplay;