import { ApprovalWorkflowStatus, ApprovalWorkflowStatusLabel } from "@/interfaces/approval.workflow";
import clsx from "clsx";
import React from "react";
import { RiProgress5Line } from "react-icons/ri";

interface Props {
    number: number;
    isSelected?: boolean;
}

export default function WorkflowStepNumber({ number, isSelected = false }: Props) {
    return (
        <div
            className={clsx(
                'flex items-center justify-center w-11 h-11 rounded-full',
                {
                    'bg-mti-purple text-mti-purple-ultralight': isSelected,
                    'bg-mti-purple-ultralight text-gray-500': !isSelected,
                }
            )}
        >
            <span className="text-lg font-semibold">{number}</span>
        </div>
    );
};