import { type HTMLAttributes, forwardRef } from 'react'

export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
  value: number
  max?: number
  size?: 'sm' | 'md' | 'lg'
  color?: 'blue' | 'green' | 'yellow' | 'red'
  showLabel?: boolean
  label?: string
}

const Progress = forwardRef<HTMLDivElement, ProgressProps>(
  (
    {
      className = '',
      value,
      max = 100,
      size = 'md',
      color = 'blue',
      showLabel = false,
      label,
      ...props
    },
    ref
  ) => {
    const percentage = Math.min(Math.max((value / max) * 100, 0), 100)

    const sizeStyles = {
      sm: 'h-1.5',
      md: 'h-2.5',
      lg: 'h-4',
    }

    const colorStyles = {
      blue: 'bg-blue-600 dark:bg-blue-500',
      green: 'bg-green-600 dark:bg-green-500',
      yellow: 'bg-yellow-500 dark:bg-yellow-400',
      red: 'bg-red-600 dark:bg-red-500',
    }

    return (
      <div ref={ref} className={className} {...props}>
        {(showLabel || label) && (
          <div className="flex justify-between mb-1">
            <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
              {label || '进度'}
            </span>
            <span className="text-sm font-medium text-slate-700 dark:text-slate-300">
              {percentage.toFixed(0)}%
            </span>
          </div>
        )}
        <div
          className={`w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden ${sizeStyles[size]}`}
        >
          <div
            className={`${sizeStyles[size]} ${colorStyles[color]} rounded-full transition-all duration-300 ease-out`}
            style={{ width: `${percentage}%` }}
          />
        </div>
      </div>
    )
  }
)

Progress.displayName = 'Progress'

export default Progress
