import { cx } from 'class-variance-authority';
import * as ProgressPrimitives from '@radix-ui/react-progress';

import './progress.css';

type ProgressProps = ProgressPrimitives.ProgressProps;

export function Progress({ className, value }: ProgressProps) {
  return (
    <ProgressPrimitives.Root className={cx(className, 'c-progress-root')} value={value}>
      <ProgressPrimitives.Indicator
        className="c-progress-indicator"
        style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
      />
    </ProgressPrimitives.Root>
  );
}
