import clsx from 'clsx'
import React, { FC, useMemo } from 'react'

import { theming } from '../../themes'
import { isNumber } from '../../utils/helpers'
import { useStyles } from './styles'

export type ProgressBarProps = {
  percents: number
  label?: string
  className?: string
}

export const ProgressBar: FC<ProgressBarProps> = ({ percents, label, className }) => {
  const { wrapperBar, progressBar, labelStyles } = useStyles({ theme: theming.useTheme() })

  const style = useMemo(() => ({ width: `calc(100% * ${percents / 100})` }), [percents])

  if (!isNumber(percents)) {
    return null
  }

  return (
    <>
      <div className={clsx(wrapperBar, className)}>
        <div className={progressBar} style={style} />

        {label && <p className={labelStyles}>{label}</p>}
      </div>
    </>
  )
}
