<script setup>
import { reactiveOmit } from "@vueuse/core";
import { ProgressIndicator, ProgressRoot, useForwardProps } from "reka-ui";
import { cn } from "../../../utils/cn";
defineOptions({ name: "UiProgress" });
const props = defineProps({
  modelValue: { type: [Number, null], required: false, default: 0 },
  max: { type: Number, required: false },
  getValueLabel: { type: Function, required: false },
  getValueText: { type: Function, required: false },
  asChild: { type: Boolean, required: false },
  as: { type: null, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
  indicatorClass: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
});
const delegatedProps = reactiveOmit(props, "class", "indicatorClass");
const forwarded = useForwardProps(delegatedProps);
</script>

<template>
  <ProgressRoot
    data-slot="progress"
    v-bind="forwarded"
    :class="cn('bg-zinc-200 relative h-2 w-full overflow-hidden rounded-full', props.class)"
  >
    <ProgressIndicator
      data-slot="progress-indicator"
      :class="cn('relative block h-full w-full overflow-hidden transition-transform duration-[660ms] ease-[cubic-bezier(0.65,0,0.35,1)] after:absolute after:inset-0 after:animate-progress after:content-[\'\'] after:bg-[linear-gradient(-45deg,_rgba(255,255,255,0.2)_25%,_transparent_25%,_transparent_50%,_rgba(255,255,255,0.2)_50%,_rgba(255,255,255,0.2)_75%,_transparent_75%,_transparent)] after:bg-[length:30px_30px]', props.indicatorClass ?? 'bg-(--primary)')"
      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
    />
  </ProgressRoot>
</template>
