import React from 'react';
import { style } from 'app/styles';

export interface PercentBarProps {
  numerator: number;
  denominator: number;
}

const defaultNumeratorBarStyle = {
  backgroundColor: 'blue',
  height: 10,
};
const defaultDenominatorBarStyle = {
  backgroundColor: 'grey',
  height: 10,
  marginBottom: 5,
};

// numbers for humans have commas
export const PercentBar = ({
  numerator,
  denominator,
}: PercentBarProps): JSX.Element => {
  const percentWidth = (numerator / denominator) * 100;
  return (
    <div style={style(defaultDenominatorBarStyle, { width: '100%' })}>
      <div
        style={style(defaultNumeratorBarStyle, { width: `${percentWidth}%` })}
      />
    </div>
  );
};

PercentBar.displayName = 'PercentBar';