"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root> {
  value?: number
  showValue?: boolean
  indicatorClassName?: string
  indicatorStyle?: React.CSSProperties
}

function Progress({
  className,
  value,
  showValue = false,
  indicatorClassName,
  indicatorStyle,
  ...props
}: ProgressProps) {
  const progressValue = value || 0;

  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "bg-muted relative h-4 w-full overflow-hidden rounded-lg",
        className
      )}
      {...props}
    >
      {progressValue > 0 && (
        <ProgressPrimitive.Indicator
          data-slot="progress-indicator"
          className={cn(
            "bg-primary h-full flex-1 transition-all rounded-lg flex items-center justify-start px-2",
            indicatorClassName
          )}
          style={{ width: `${progressValue}%`, ...indicatorStyle }}
        >
          {showValue && (
            <span className="text-xs text-white font-medium">
              {progressValue}%
            </span>
          )}
        </ProgressPrimitive.Indicator>
      )}
    </ProgressPrimitive.Root>
  )
}

export { Progress }