import { formatBytes } from '../../utils/common';
import { __ } from '@wordpress/i18n';
const Parcentage = ({ usedGB, totalGB }) => {
	const percentage = (usedGB / totalGB) * 100;

	return (
		<div className='edbi-parcentage-container'>
			<h3>{__('Storage', 'easy-dropbox-integration')}</h3>
			<div className='edbi-progress-bar-container'>
				<div
					className='edbi-progress-bar'
					style={{
						height: '100%',
						width: `${percentage}%`,
						transition: 'width 0.5s ease',
					}}
				></div>
			</div>
			<div className='edbi-progress-bar-text'>
				<h5>
					{__(formatBytes(usedGB), 'easy-dropbox-integration')}{' '}
					{__('used of', 'easy-dropbox-integration')}
				</h5>{' '}
				<h5 className='edbi-storage-text'>
					{__(formatBytes(totalGB), 'easy-dropbox-integration')}
				</h5>
			</div>
		</div>
	);
};

export default Parcentage;