// @flow strict

import * as React from 'react';

import {classify} from '../../utils/classify';

import css from './LinearLoader.module.css';


export type LinearLoaderProps = {
  value: number,
  size?: 'large' | 'medium' | 'small',
  className?: string,
};

export const LinearLoader: React$AbstractComponent<
  LinearLoaderProps,
  HTMLDivElement,
> = React.forwardRef<LinearLoaderProps, HTMLDivElement>(
  ({value, size = 'medium', className}: LinearLoaderProps, ref): React.Node => (
    <div
      className={classify(
        css.lineContainer,
        {
          [css.large]: size === 'large',
          [css.medium]: size === 'medium',
          [css.small]: size === 'small',
        },
        className,
      )}
      ref={ref}
    >
      <div className={css.progressBar} style={{width: `${value + '%'}`}}></div>
    </div>
  ),
);