import clsx from '../../../utils/clsx';

const ProgressBar = ( {
	id,
	style,
	className = '',
	progress,
	height = 8,
	background = 'secondary',
	fillColor = 'primary',
} ) => {
	const progressBarStyle = {
		height,
		...style,
	};

	return (
		<div
			id={ id }
			style={ progressBarStyle }
			className={ clsx(
				'rbfb-progress-bar',
				`bg-${ background }`,
				className
			) }
		>
			<div
				style={ { width: `${ progress }%` } }
				className={ clsx(
					'rbfb-progress-bar__fill',
					`bg-${ fillColor }`
				) }
			/>
		</div>
	);
};

export default ProgressBar;
