// 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?.progress && currentState?.progress > 0 ? (
        <Progress
          percent={Math.round(currentState.progress * 100)}
          status='active'
          style={{ width: '150px', marginBottom: '2px' }}
        />
      ) : null}
    </Flex>
  )
}

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

export default StateDisplay