<script lang="ts">
  import { cn } from "$lib/utils";

  export let value = 0;
  export let max = 100;
  let className: string | undefined = undefined;
  export { className as class };

  $: percentage = (value / max) * 100;
</script>

<div
  role="progressbar"
  aria-valuemin={0}
  aria-valuemax={max}
  aria-valuenow={value}
  class={cn(
    "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
    className
  )}
  {...$$restProps}
>
  <div
    class="h-full w-full flex-1 bg-primary transition-transform duration-300 ease-out"
    style="transform: translateX(-{100 - (percentage || 0)}%)"
  ></div>
</div>
