import React from 'react';

import { formatNumber } from './helpers';

interface HBarProps {
  label: string;
  value: number;
  max: number;
  color?: string;
  suffix?: string;
}

const HBar = ({
  label,
  value,
  max,
  color = '#B7007C',
  suffix = '',
}: HBarProps): JSX.Element => {
  const pct = max > 0 ? (value / max) * 100 : 0;

  return (
    <div className="mb-3">
      <div className="flex items-center justify-between">
        <span className="text-sm text-gray-700">{label}</span>
        <span className="text-sm font-semibold text-gray-700">
          {formatNumber(value)}
          {suffix}
        </span>
      </div>
      <div className="h-2 bg-gray-100 rounded-full overflow-hidden mt-1">
        <div
          className="h-full rounded-full transition-all duration-700"
          style={{
            width: `${Math.min(pct, 100)}%`,
            backgroundColor: color,
          }}
        />
      </div>
    </div>
  );
};

export default HBar;