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

import {cn} from '../../lib';

interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root> {
  indicatorClassName?: string;
}

function Progress({className, value, indicatorClassName, ref, ...props}: ProgressProps) {
  return (
    <ProgressPrimitive.Root
      ref={ref}
      className={cn('relative h-4 w-full overflow-hidden rounded-full bg-neutral-100', className)}
      {...props}
    >
      <ProgressPrimitive.Indicator
        className={cn('h-full w-full flex-1 bg-neutral-900 transition-all', indicatorClassName)}
        style={{transform: `translateX(-${100 - (value || 0)}%)`}}
      />
    </ProgressPrimitive.Root>
  );
}
Progress.displayName = ProgressPrimitive.Root.displayName;

export {Progress};
