type ProgressProps = {
  value: number;
};

export function Progress({
  value,
}: ProgressProps) {
  const clampedValue = Math.max(
    0,
    Math.min(100, value),
  );

  return (
    <div className="h-2 overflow-hidden rounded-full bg-slate-800">
      <div
        className="h-2 rounded-full bg-green-400 transition-all"
        style={{
          width: `${clampedValue}%`,
        }}
      />
    </div>
  );
}