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

export interface ProgressProps
  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
  /** 0–100; omit/null for indeterminate. */
  value?: number | null
  indeterminate?: boolean
}

/**
 * Determinate/indeterminate progress bar. Radix wires aria-valuenow/min/max.
 * The indeterminate sweep animation is suppressed under reduced-motion.
 */
export const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  ProgressProps
>(({ className, value = null, indeterminate, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...props }, ref) => {
  const isIndeterminate = indeterminate || value === null || value === undefined
  return (
    <ProgressPrimitive.Root
      ref={ref}
      value={isIndeterminate ? null : value}
      aria-label={ariaLabel ?? (ariaLabelledby ? undefined : 'Progress')}
      aria-labelledby={ariaLabelledby}
      className={cn('relative h-2 w-full overflow-hidden rounded bg-hover', className)}
      {...props}
    >
      <ProgressPrimitive.Indicator
        className={cn(
          'h-full w-full flex-1 bg-accent transition-transform duration-150 motion-reduce:transition-none',
          isIndeterminate && 'animate-pulse motion-reduce:animate-none',
        )}
        style={
          isIndeterminate
            ? undefined
            : { transform: `translateX(-${100 - (value ?? 0)}%)` }
        }
      />
    </ProgressPrimitive.Root>
  )
})
Progress.displayName = 'Progress'