import React from 'react';

export interface HorizontalBarChartProps {
  /** 100% 바가 뜻하는 전체 값 */
  total: number;
  /** 화면에 채워져보이는 값 */
  value: number;
  /** 배경 색상 */
  backgroundColor?: string;
  /** 바의 색상 */
  barColor?: string;
  /** 바의 높이 */
  height?: number;
}

export function HorizontalBarChart(
  props: HorizontalBarChartProps
): React.ReactNode {
  const { total, value, backgroundColor, barColor, height } = props;
  return (
    <div
      className="tipp_horizontal-bar-chart bar-wrapper"
      style={{ height, backgroundColor }}
    >
      <div
        style={{
          width: `${Math.round((value / total) * 100)}%`,
          height: '100%',
        }}
      >
        <div className="bar" style={{ backgroundColor: barColor }} />
      </div>
    </div>
  );
}
