type ProgressBarProps = {
  value: number;
  label?: string;
};

export default function ProgressBar({ value, label }: ProgressBarProps) {
  const clamped = Math.max(0, Math.min(100, value));

  return (
    <div className="w-full">
      {label ? <div className="mb-1 text-xs font-semibold text-slate-600">{label}</div> : null}
      <div className="h-2.5 w-full rounded-full bg-[#ececef]">
        <div className="h-2.5 rounded-full bg-brand transition-all" style={{ width: `${clamped}%` }} />
      </div>
    </div>
  );
}
