'use client';

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

import { cn } from '@/lib/utils';
import { colorPalettes } from '@/lib/cva-presets';

const progressVariants = cva('relative w-full overflow-hidden rounded-full bg-(--ctl-subtle)', {
  variants: {
    /** CBAR draws the bar at two heights, 6px and 9px. */
    size: {
      md: 'h-1.5',
      lg: 'h-2.25',
    },
    colorPalette: colorPalettes,
  },
  defaultVariants: {
    size: 'md',
    colorPalette: 'primary',
  },
});

export interface ProgressProps
  extends React.ComponentProps<typeof ProgressPrimitive.Root>,
    VariantProps<typeof progressVariants> {}

/**
 * Determinate progress bar (0–100).
 *
 * Omit `value` for an indeterminate task and Radix reports it as such to
 * assistive technology; use {@link ProgressCircle} without a value if you also
 * want a visual for that case.
 */
function Progress({ className, value, size, colorPalette, ...props }: ProgressProps) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      data-size={size ?? 'md'}
      value={value}
      className={cn(progressVariants({ size, colorPalette }), className)}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="h-full w-full flex-1 bg-(--ctl-solid) transition-transform duration-(--ui-duration-base) ease-(--ui-ease-standard)"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  );
}

export { Progress, progressVariants };