'use client';

interface Props { value: number; className?: string; }

export default function ProgressBar({ value, className = '' }: Props) {
  const clamped = Math.min(Math.max(value, 0), 100);
  return (
    <div
      className={`progress-bar ${className}`}
      role="progressbar"
      aria-valuenow={clamped}
      aria-valuemin={0}
      aria-valuemax={100}>
      <div className="progress-fill" style={{ width: `${clamped}%` }} />
    </div>
  );
}