import * as React from 'react'
import * as ProgressPrimitive from '@radix-ui/react-progress'
import { cn } from '@/lib/utils'

export interface ProgressProps
  extends Omit<
    React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,
    'value'
  > {
  value?: number | null
  max?: number
  className?: string
}

const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
  ({ className, value, max = 100, ...rootProps }, ref) => {
    const percent = value != null ? Math.min(max, Math.max(0, value)) : undefined
    return (
      <ProgressPrimitive.Root
        ref={ref as React.RefObject<HTMLDivElement>}
        value={percent ?? null}
        max={max}
        className={cn(
          'relative h-1 w-full overflow-hidden rounded-full bg-fill-secondary',
          className
        )}
        style={{ height: 4 }}
        {...rootProps}
      >
        <ProgressPrimitive.Indicator
          className="h-full rounded-full bg-success transition-[width] duration-200 ease-out"
          style={{
            width: percent != null ? `${(percent / max) * 100}%` : '0%',
          }}
        />
      </ProgressPrimitive.Root>
    )
  }
)
Progress.displayName = 'Progress'

export { Progress }