'use client'

interface RangeProgressBarProps {
  low: number
  high: number
  current: number
}

export function RangeProgressBar({ low, high, current }: RangeProgressBarProps) {
  const percentage = ((current - low) / (high - low)) * 100
  const clampedPercentage = Math.max(0, Math.min(100, percentage))

  return (
    <div className="space-y-1">
      <div className="flex items-center gap-2">
        <div className="text-xs text-muted-foreground w-16 text-left">${low.toFixed(2)}</div>
        <div className="flex-1 bg-muted h-2 relative border border-border overflow-visible">
          {/* Filled portion */}
          <div
            className="bg-primary h-full transition-all"
            style={{ width: `${clampedPercentage}%` }}
          />
          {/* Marker - positioned absolutely */}
          <div
            className="w-3 h-3 bg-primary absolute top-1/2 -translate-y-1/2 -translate-x-1/2"
            style={{ left: `${clampedPercentage}%` }}
          />
        </div>
        <div className="text-xs text-muted-foreground w-16 text-right">${high.toFixed(2)}</div>
      </div>
    </div>
  )
}