import { BidiText } from '@/components/foundation/BidiText';
import { classNames } from '@/lib/components/classNames';
import styles from './Progress.module.css';

interface ProgressProps {
  value?: number;
  max?: number;
  label: string;
  showValue?: boolean;
  className?: string;
}

export function Progress({ value, max = 100, label, showValue = false, className }: ProgressProps) {
  const normalized = value === undefined ? undefined : Math.min(max, Math.max(0, value));
  return (
    <div className={classNames(styles.group, className)}>
      <div className={styles.labelRow}>
        <span>{label}</span>
        {showValue && normalized !== undefined ? (
          <BidiText>{`${Math.round((normalized / max) * 100)}%`}</BidiText>
        ) : null}
      </div>
      <progress
        className={styles.progress}
        max={max}
        aria-label={label}
        {...(normalized === undefined ? {} : { value: normalized })}
      />
    </div>
  );
}
