import * as React from 'react';
import './index.scss';
interface Iprops {
  text: string;
  molecular: number;
  denominator: number;
  color?: string;
  className?: string;
}
const Percentage: React.FC<Iprops> = (props) => {
  const { molecular, denominator, text, className, color } = props;
  return (
    <div className={`percentage-wrapper ${className}`}>
      <div className='percentage-circle' style={{ borderColor: color }}>
        <div className='percentage-info'>
          <p className='percentage-molecular' style={{ color: color }}>
            {molecular}
          </p>
          <span>/</span>
          <p>{denominator}</p>
        </div>
      </div>
      <p className='percentage-text'>{text}</p>
    </div>
  );
};
export default Percentage;
