import { type ComponentPropsWithoutRef } from 'react';
import { Progress as RProgress } from 'radix-ui';
import { cx } from '../utils';

export const Progress = ({
  value = 0,
  className,
  ...props
}: ComponentPropsWithoutRef<typeof RProgress.Root>) => (
  <RProgress.Root className={cx('mta-progress', className)} value={value} {...props}>
    <RProgress.Indicator
      className="mta-progress__indicator"
      style={{ width: `${value}%` }}
    />
  </RProgress.Root>
);
