import React, {FC} from 'react';

import {ProgressBarStyle as S} from './styles/progress-bar.style';
import {IProgressBar} from './progress-bar.type';

export const ProgressBarComponent: FC<IProgressBar> = ({
    value,
    color,
    size,
    containerClassName,
    showValue = true,
    isRtl = false,
    valueColor,
}) => {
    return (
        <S.Container
            className={`${isRtl ? 'flex-row-reverse gap-1.5' : ''} ${containerClassName}`}
        >
            <S.Progress
                scheme={color}
                variant='determinate'
                value={value}
                size={size}
                isRtl={isRtl}
            />
            {showValue && <S.Label color={valueColor}>{value}%</S.Label>}
        </S.Container>
    );
};