<template>
    <div class="flex items-center relative">
        <!-- v-bind:class="{ 'text-white  bg-teal-600 border-teal-600': isCurrent, 'border-teal-600': isChecked }" -->
        <div
            class="text-gray-500 rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2"
            :class="[
                isCurrent ? 'text-white  bg-teal-600 border-teal-600' : 'border-gray-300',
                isChecked && 'text-teal-600 border-teal-600',
            ]"
        >
            <!-- <svg class="my-svg-component" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z"
                />
            </svg> -->
            <slot></slot>
            <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase invisible sm:visible">
                {{ label }}
            </div>
        </div>
    </div>
    <div v-if="!isLastStep"
        class="flex-auto border-t-2 transition duration-500 ease-in-out invisible sm:visible"
        :class="[isChecked ? 'border-teal-600' : 'border-gray-300']"
    ></div>
</template>

<script>
export default {
    name: 'Icon_Multistep',

    props: {
        isCurrent: Boolean,
        isChecked: Boolean,
        isLastStep: Boolean,
        label: String,
    },

    data() {
        return {
            mode: 'light',
            checkedClass: 'border-teal-600',
            uncheckedClass: 'border-gray-300',
        };
    },
};
</script>
