import * as ProgressPrimitive from '@radix-ui/react-progress';
import { type VariantProps, cva } from 'class-variance-authority';
import * as React from 'react';
import { cn } from '../..';

import styles from './BaseProgress.module.css';

export const baseProgressVariants = cva(styles.BaseProgress, {
  variants: {
    variant: {
      default: styles.default,
    },
  },
  defaultVariants: {
    variant: 'default',
  },
});

export interface BaseProgressProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof baseProgressVariants>,
    React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
  asChild?: boolean;
}

export const BaseProgress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  BaseProgressProps
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn(styles.BaseProgress, baseProgressVariants, className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className={cn(styles.BaseProgressIndicator)}
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
));
BaseProgress.displayName = ProgressPrimitive.Root.displayName;
