import React from 'react';

export interface ProgressProps {
  value: number; // 0 ~ 100
  showLabel?: boolean;
  size?: 'sm' | 'md' | 'lg';
  color?: 'orange' | 'emerald' | 'blue' | 'slate';
  className?: string;
}

export const Progress: React.FC<ProgressProps> = ({
  value,
  showLabel = false,
  size = 'md',
  color = 'orange',
  className = '',
}) => {
  const clampedValue = Math.min(100, Math.max(0, value));

  const sizeClasses = {
    sm: 'h-1',
    md: 'h-1.5',
    lg: 'h-2.5',
  };

  const bgClasses = {
    orange: 'bg-orange-500',
    emerald: 'bg-emerald-500',
    blue: 'bg-blue-500',
    slate: 'bg-slate-500',
  };

  return (
    <div className={`space-y-1.5 ${className}`}>
      {showLabel && (
        <div className="flex justify-between text-sm font-semibold text-slate-500">
          <span>진행률</span>
          <span>{clampedValue}%</span>
        </div>
      )}
      <div className={`w-full bg-slate-100 rounded-full overflow-hidden ${sizeClasses[size]}`}>
        <div
          className={`${bgClasses[color]} rounded-full transition-all duration-500`}
          style={{ width: `${clampedValue}%`, height: '100%' }}
        />
      </div>
    </div>
  );
};