import { cn } from "@/lib/utils"

interface SurrealProgressProps {
  value: number
  max?: number
  className?: string
  showLabel?: boolean
}

export function SurrealProgress({ value, max = 100, className, showLabel = false }: SurrealProgressProps) {
  const percentage = Math.min(Math.max((value / max) * 100, 0), 100)

  return (
    <div className={cn("w-full", className)}>
      <div className="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
        <div
          className="h-full bg-primary transition-all duration-500 ease-out rounded-full"
          style={{ width: `${percentage}%` }}
        />
      </div>
      {showLabel && <span className="mt-1 text-xs text-muted-foreground">{Math.round(percentage)}%</span>}
    </div>
  )
}
