import type { ReactElement } from 'react'

/** A bar filled to `part` of `whole`. */
export function Meter({ part, whole }: { part: number; whole: number }): ReactElement {
  return (
    <div className="ag-meter">
      <div
        className="ag-meter-fill"
        style={{ width: `${Math.min(100, Math.round((100 * part) / Math.max(whole, 1)))}%` }}
      />
    </div>
  )
}