'use client'

import { confColor } from './dewarp-constants'

/** Short confidence bar (visual). */
export function ConfBar({ value }: { value: number }) {
  const pct = Math.round(value * 100)
  const bg = value >= 0.7 ? 'bg-green-500' : value >= 0.5 ? 'bg-yellow-500' : 'bg-gray-400'
  return (
    <div className="flex items-center gap-1.5">
      <div className="w-16 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
        <div className={`h-full rounded-full ${bg}`} style={{ width: `${pct}%` }} />
      </div>
      <span className={`text-xs font-mono ${confColor(value)}`}>{pct}%</span>
    </div>
  )
}