'use client'

interface SentimentalityBarProps {
  sentiment?: number // 0-100, where 0 is full Short (red), 100 is full Long (green), 50 is neutral
}

export function SentimentalityBar({ sentiment = 50 }: SentimentalityBarProps) {
  const clampedSentiment = Math.max(0, Math.min(100, sentiment))

  return (
    <div className="space-y-3">
      <div className="text-sm font-semibold">Market sentimentality</div>
      
      <div className="flex items-center gap-3">
        <div className="text-xs text-muted-foreground w-10">Short</div>
        
        <div className="flex-1 relative">
          {/* Fixed full-width gradient track — never changes */}
          <div
            className="h-3 w-full border border-border"
            style={{ background: `linear-gradient(to right, #e81123 0%, #ffd700 50%, #107c10 100%)` }}
          />

          {/* Independent marker — only this moves */}
          <div
            className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3 h-5 bg-foreground border-2 border-background transition-all"
            style={{ left: `${clampedSentiment}%` }}
          />
        </div>
        
        <div className="text-xs text-muted-foreground w-10 text-right">Long</div>
      </div>
    </div>
  )
}