@props(['step'])

<div class="gray-bar d-flex justify-content-center">
    <div class="steps-container d-flex">
        <div class="d-flex {{ $step >= 1 ? 'active' : '' }}">
            <div class="step rounded-pill text-center d-flex ">
                <span class="align-self-center mx-auto fw-bold text-white">1</span>
            </div>
        </div>

        <div class="d-flex {{ $step >= 2 ? 'active' : '' }}">
            <div class="step-container-line" ></div>

            <div class="step rounded-pill text-center d-flex ">
                <span class="align-self-center mx-auto fw-bold text-white">2</span>
            </div>
        </div>

        <div class="d-flex {{ $step >= 3 ? 'active' : '' }}">
            <div class="step-container-line"></div>

            <div class="step rounded-pill text-center d-flex ">
                <span class="align-self-center mx-auto fw-bold text-white">3</span>
            </div>
        </div>
    </div>
</div>