import { type FC } from "react";

type Props = {
  value: number;
  className?: string;
};

const ProgressBar: FC<Props> = ({ value, className = "" }) => {
  const progress = Math.min(100, Math.max(0, value));

  return (
    <div className={`flex-1 h-[5px] rounded-full bg-white/40 flex overflow-hidden ${className}`}>
      <div className="h-full rounded-full bg-black" style={{ width: `${progress}%` }} />
    </div>
  );
};

export default ProgressBar;
