'use client';

import * as React from 'react';
import { Progress as BaseProgress } from '@base-ui/react/progress';
import { cn } from '@/lib/utils';

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof BaseProgress.Root> & { value?: number | null }) {
  return (
    // Spec source: Figma "APP Re-design Phase 1" → page "Progress ✅"
    <BaseProgress.Root
      data-slot="progress"
      value={value}
      className={cn(
        'relative h-6 w-full overflow-hidden rounded-full bg-secondary',
        className,
      )}
      {...props}
    >
      <BaseProgress.Track className="absolute inset-0">
        <BaseProgress.Indicator
          data-slot="progress-indicator"
          className="h-full bg-primary transition-all"
        />
      </BaseProgress.Track>
    </BaseProgress.Root>
  );
}

export { Progress };