interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
  value: number
  max?: number
  color?: "default" | "success" | "warning" | "danger"
}

const colorStyles = {
  default: "bg-primary",
  success: "bg-green-600",
  warning: "bg-yellow-600",
  danger: "bg-red-600",
}

export function Progress({
  value,
  max = 100,
  color = "default",
  className = "",
  ...props
}: ProgressProps) {
  const percentage = Math.min((value / max) * 100, 100)

  let colorClass = colorStyles[color]
  // Auto-select color based on percentage
  if (color === "default") {
    if (percentage >= 90) {
      colorClass = colorStyles.danger
    } else if (percentage >= 75) {
      colorClass = colorStyles.warning
    } else {
      colorClass = colorStyles.success
    }
  }

  return (
    <div
      className={`relative w-full h-2 rounded-full bg-secondary overflow-hidden ${className}`}
      {...props}
    >
      <div
        className={`h-full ${colorClass} transition-all`}
        style={{ width: `${percentage}%` }}
      />
    </div>
  )
}