import { ReactNode } from 'react'

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

export interface MeterBarProps {
  // current value of the meter bar
  meterValue: number

  // total value of the meter bar
  overAllValue: 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

  /**
   * 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