import styles from './styles.module.css'

interface IProps {
    progress: number
}

const Progress = ({ progress }: IProps) => {
    const rotate = (progress / 100) * 360
    const rightRotate = progress < 50 ? rotate - 135 : 45
    const leftRotate = progress > 50 ? rotate + 45 : 225
    return (
        <div className={styles.container}>
            <div className={styles.left}>
                <div
                    style={{ transform: `rotate(${leftRotate}deg)` }}
                    className={styles.leftcircle}
                ></div>
            </div>
            <div className={styles.right}>
                <div
                    style={{ transform: `rotate(${rightRotate}deg)` }}
                    className={styles.rightcircle}
                ></div>
            </div>
        </div>
    )
}

export default Progress
