import React from 'react';
import { cn } from '../../lib/utils.ts';

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

export const Progress: React.FC<ProgressProps> = ({ value, className }) => {
  return (
    <div className={cn('w-full h-2 bg-[var(--surface-2)] rounded-[var(--r-pill)] overflow-hidden', className)}>
      <div
        className="h-full bg-[var(--brand-500)] rounded-[var(--r-pill)] transition-all duration-500"
        style={{ width: `${Math.min(100, Math.max(0, value))}%` }}
      />
    </div>
  );
};