<template>
    <ProgressRoot class="my-2 relative overflow-hidden bg-light-25 dark:bg-dark-25 w-48 h-3 data-[shape=thin]:h-1 data-[shape=large]:h-6" :data-shape="shape" style="transform: translateZ(0)" >
        <ProgressIndicator class="bg-light-50 dark:bg-dark-50 h-full w-0 transition-[width] ease-linear" :style="`transition-duration: ${delay}ms; width: ${progress ? 100 : 0}%`" />
    </ProgressRoot>
</template>

<script setup lang="ts">
const { delay = 1500, decreasing = false, shape = 'normal' } = defineProps<{
    delay?: number
    decreasing?: boolean
    shape?: 'thin' | 'normal' | 'large'
}>();

const emit = defineEmits(['finish']);

const progress = ref(false);
nextTick(() => {
    progress.value = true;
    setTimeout(emit, delay, 'finish');
});
</script>