import {
  THREADS_MAX_PUBLISH_CHARS,
  threadsPostLengthHint,
  threadsPostLengthMeterClass,
  threadsPostRuneLen,
} from '../lib/threadsPostLimits'

type Props = {
  text: string
  showHint?: boolean
}

export function ThreadsPostCharMeter({ text, showHint = true }: Props) {
  const count = threadsPostRuneLen(text)
  const meterClass = threadsPostLengthMeterClass(text)
  const hint = threadsPostLengthHint(text)

  return (
    <div className="hx-threads-char-meter">
      <span className={`text-xs font-semibold tabular-nums ${meterClass}`}>
        {count} / {THREADS_MAX_PUBLISH_CHARS} 字
      </span>
      {showHint && hint ? <span className="text-xs text-muted">{hint}</span> : null}
    </div>
  )
}