import type { VariantProps } from "@karma/cva";
import { cva, cx } from "@karma/cva";
import * as ProgressPrimitive from "@radix-ui/react-progress";
import * as React from "react";

const progressVariants = cva({
  base: "bg-secondary relative h-4 w-full overflow-hidden rounded-full",
  variants: {
    variant: {
      primary: "bg-foreground",
      accent: "bg-accent",
      muted: "bg-muted",
    },
  },
  defaultVariants: {
    variant: "primary",
  },
});

export type ProgressProps = React.ComponentPropsWithoutRef<
  typeof ProgressPrimitive.Root
> &
  VariantProps<typeof progressVariants> & {
    indicatorClassName?: string;
  };

export const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  ProgressProps
>(({ className, variant, value, indicatorClassName, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cx(
      "relative h-4 w-full overflow-hidden rounded-full",
      className,
    )}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className={cx(
        "h-full w-full flex-1 transition-all",
        progressVariants({ variant }),
        indicatorClassName,
      )}
      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
    />
  </ProgressPrimitive.Root>
));

Progress.displayName = ProgressPrimitive.Root.displayName;