import { WorkflowStep } from "@/interfaces/approval.workflow";
import clsx from "clsx";
import { IoCheckmarkDoneSharp, IoCheckmarkSharp } from "react-icons/io5";
import { RxCross2 } from "react-icons/rx";

type Props = Pick<WorkflowStep, 'stepNumber' | 'completed' | 'finalStep' | 'selected' | 'rejected'>

export default function WorkflowStepNumber({ stepNumber, selected = false, completed, rejected, finalStep }: Props) {
    return (
        <div
            className={clsx(
                'flex items-center justify-center min-w-11 min-h-11 rounded-full',
                {
                    'bg-mti-red-dark text-mti-red-ultralight': rejected,
                    'bg-mti-purple-dark text-mti-purple-ultralight': selected,
                    'bg-mti-purple-ultralight text-gray-500': !selected,
                }
            )}
        >
            {rejected ? (
                <RxCross2 className="text-xl font-bold" size={25}/>
            ) : completed && finalStep ? (
                <IoCheckmarkDoneSharp className="text-xl font-bold" size={25} />
            ) : completed && !finalStep ? (
                <IoCheckmarkSharp className="text-xl font-bold" size={25} />
            ) : (
                <span className="text-lg font-semibold">{stepNumber}</span>
            )}
        </div>
    );
};