import { FC } from 'react'

const ProgressBar: FC<{ percentage: number }> = ({ percentage }) => {
    return (
        <div className='w-full bg-gray-200 dltr overflow-hidden rounded-full h-2'>
            <div
                className={`h-2 rounded-full transition-all duration-300 ${percentage > 90 ? 'bg-red-500' :
                    percentage > 70 ? 'bg-yellow-500' :
                        'bg-green-500'
                    }`}
                style={{ width: `${percentage}%` }}
            ></div>
        </div>
    )
}

export default ProgressBar