export const ValueDisplay = ({prefix, value, suffix}) =>{
  let val = '---'

  if(value)
    if(Number.isFinite(+value))
      val = (+value).toPrecision(4)??'---'
    else
      val = value

  return(<span className='display_value'>{prefix} {val} {suffix}</span>)
}

export const Display = (props)=>{
  const {label} = props

  return <div className={props.className}>
      <div className='display_label'>{label}</div>        
      <div style={{display:"flex", flexGrow:1}}>
        <ValueDisplay {...props}/>
      </div>
    </div>
  
}