<template>
    <ProgressRoot :max="max" v-model="model" 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 transition-[width] duration-[660ms] ease-[cubic-bezier(0.65, 0, 0.35, 1)]" :style="`width: ${((model ?? 0) / max) * 100}%`" />
    </ProgressRoot>
</template>

<script setup lang="ts">
const { max = 100, shape = 'normal' } = defineProps<{
    max?: number
    shape?: 'thin' | 'normal' | 'large'
}>();
const model = defineModel<number>();
</script>