import * as React from 'react';
import './circle.scss';
interface Iprops {
  total: number;
  current: number;
  text: string;
  color: string;

  unit?: string;
}
const cirlceProcess: React.FC<Iprops> = (props) => {
  const { total, text, current, unit, color } = props;
  const rate = (current / total) * 100;
  return (
    <div className='process-circle'>
      <div className='process-name'>{text}</div>
      <div className='process-block'>
        {current ? (
          <div style={{ width: rate, backgroundColor: color }}></div>
        ) : (
          '-'
        )}
      </div>
      <div>
        <span className='process-rate'>{rate.toFixed(2)}%</span>
        <span className='process-current'>{current}/</span>
        <span>
          {total} {unit}
        </span>
      </div>
    </div>
  );
};
export default cirlceProcess;
