import { clsx } from 'clsx';

export type ProgressProps = {
  className?: string;
  id: string;
  progress: { value: number; max: number };
};

const Progress = ({ className, id, progress }: ProgressProps) => {
  return (
    <progress id={id} className={clsx('np-progress d-block', className)} {...progress}>
      {Math.floor((progress.value / progress.max) * 100)}%
    </progress>
  );
};

export default Progress;
