<template>
  <div :class="[cn.b(), cn.m(type)]">
    <div
      :class="cn.e('bar')"
      :style="{ width: `${progress}%` }"
    />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'UiProgressBar',
})

const props = withDefaults(defineProps<ProgressBarProps>(), {
  progress: 0,
})

export interface ProgressBarProps {
  progress: number
}

const cn = useClassname('ui-progress-bar')
const type = computed(() => {
  if (props.progress <= 75)
    return 'normal'
  else if (props.progress > 75 && props.progress < 95)
    return 'middle'
  else
    return 'high'
})
</script>

<style lang="scss">
@use 'styles';
</style>
