<template>
    <div class="text-sm relative">
        <div
            class="flex items-center justify-center w-6 h-6 rounded-full border-solid border-2 absolute -top-2 -left-2 font-arvo font-bold"
            :class="[colors[type].container, colors[type].lightText]"
            v-text="step"
        ></div>
        <div class="flex flex-row items-center p-4 border-2 rounded form-group shadow-sm group" :class="[colors[type].container, type]">
            <div class="flex-grow text-sm" :class="colors[type].text">
                <slot name="current" v-if="modelValue === step"></slot>
                <slot name="finished" v-if="modelValue > step"></slot>
                <slot name="due" v-if="modelValue < step"></slot>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, computed} from 'vue';

const colors = ref({
    success: {
        container: 'bg-green-200 border-green-600',
        lightText: 'text-green-700',
        text: 'text-green-900',
    },
    info: {
        container: 'bg-blue-200 border-blue-600',
        lightText: 'text-blue-700',
        text: 'text-blue-900',
    },
    default: {
        container: 'bg-neutral-200 border-neutral-600',
        lightText: 'text-neutral-700',
        text: 'text-neutral-900',
    },
});

const type = computed(() => {
    if (props.modelValue === props.step) {
        return 'info';
    }
    if (props.modelValue > props.step) {
        return 'success';
    }
    return 'default';
});

const props = defineProps({
    modelValue: {
        required: true,
        type: Number,
    },
    step: {
        required: true,
        type: Number,
    },
});
</script>
