import { ReactNode } from 'react'

export interface RenderReactNode {
  (props?: MeterBarProps): ReactNode
}

export interface MeterBarProps {
  // current value of the meter bar (ie. between min & max)
  value: number

  // min value of the meter bar
  min: number

  // max value of the meter bar (aka. total)
  max: number

  // used to toggle the display of meter bar count
  displayCount?: boolean

  /**
   * @description 'prefix' | 'suffix'
   * used to change the alignment position of the meter count
   */
  numberAlignType?: string

  // used to specify the width of the meter element, not counting the label
  meterWidth: number

  /**
   * Render Props
   */
  // used to render the count element
  renderCount: RenderReactNode

  // used to render the progress bar
  renderProgressBar: RenderReactNode

  // used to render wrapper of the meter bar
  renderWrapper: RenderReactNode

  // where the meter bar children will be get stored
  children?: RenderReactNode
}

/**
 * Concern:
 * if user's tries to set both value true then that may lead to confusion
 */
// isNumberPrefix: boolean
// isNumberSuffix: boolean