'use client';

import * as React from 'react';
import { Progress as ProgressPrimitive } from 'radix-ui';

import { cn } from '@/lib/utils';

export type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root>;

/**
 * Determinate progress bar (0–100).
 *
 * Omit `value` for an indeterminate task and Radix reports it as such to
 * assistive technology; use a Spinner if you also want a visual for that case.
 */
function Progress({ className, value, ...props }: ProgressProps) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      value={value}
      className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="h-full w-full flex-1 bg-primary transition-transform duration-(--ui-duration-base) ease-(--ui-ease-standard)"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  );
}

export { Progress };