import React from "react";

import CheckCircleIcon from "@mui/icons-material/CheckCircle";

import style from "./CheckOutProgress.module.css";

function CheckOutProgress({ step = 1 }) {
	return (
		<div className={style.container}>
			<div className={style.item}>
				{step > 1 ? (
					<CheckCircleIcon color="success2" />
				) : (
					<NumberIcon number={1} />
				)}

				<p>Personal Details</p>
			</div>
			<div className={style.item}>
				{step > 2 ? (
					<CheckCircleIcon color="success2" />
				) : (
					<NumberIcon number={2} />
				)}
				<p>Verification</p>
			</div>
			<div className={style.item}>
				{step > 3 ? (
					<CheckCircleIcon color="success2" />
				) : (
					<NumberIcon number={3} />
				)}
				<p>Select Payment Method</p>
			</div>
		</div>
	);
}

export default CheckOutProgress;

const NumberIcon = ({ number = 1 }) => {
	return (
		<div className={style.number_icon}>
			<div className={style.outer_circle}></div>
			<span>{number}</span>
		</div>
	);
};
