import { type ReactElement } from "react";
import * as React from "react";
import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
import { cn } from "@/lib/utils";

/**
 * Progress — WealthX Design System
 * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=73-1983
 *
 * Base: official shadcn progress (npx shadcn\@latest add progress)
 * WealthX overrides: sharp corners (no rounded-full), track bg-muted instead of bg-primary/20
 */
export type ProgressProps = React.ComponentProps<
  typeof ProgressPrimitive.Root
> & {
  /** Additional classes applied to the indicator (filled bar). Use to override the default bg-primary colour. */
  indicatorClassName?: string;
};

function Progress({
  className,
  value,
  indicatorClassName,
  ...props
}: ProgressProps): ReactElement {
  return (
    <ProgressPrimitive.Root
      className={cn("relative h-2 w-full overflow-hidden bg-muted", className)}
      data-slot="progress"
      value={value}
      {...props}
    >
      <ProgressPrimitive.Track className="h-full">
        <ProgressPrimitive.Indicator
          className={cn("h-full bg-primary transition-all", indicatorClassName)}
          data-slot="progress-indicator"
        />
      </ProgressPrimitive.Track>
    </ProgressPrimitive.Root>
  );
}

export { Progress };