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

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

type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root> & {
  variant?: 'default' | 'success' | 'destructive';
  size?: 'sm' | 'md' | 'lg';
};

const trackVariants: Record<string, string> = {
  default: 'bg-primary/20',
  success: 'bg-pm-no-soft',
  destructive: 'bg-destructive/20',
};

const indicatorVariants: Record<string, string> = {
  default: 'bg-progress shadow-progress',
  success: 'bg-pm-yes shadow-none',
  destructive: 'bg-destructive shadow-none',
};

const sizeVariants: Record<string, string> = {
  sm: 'h-1.5',
  md: 'h-2',
  lg: 'h-6',
};

function Progress({
  className,
  variant = 'default',
  size = 'lg',
  value,
  ...props
}: ProgressProps) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        'relative w-full overflow-hidden rounded-full',
        trackVariants[variant],
        sizeVariants[size],
        className,
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className={cn(
          'h-full w-full flex-1 rounded-full transition-all',
          indicatorVariants[variant],
        )}
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  );
}

export { Progress };