import { ratioPercent } from './format'

export type ScoreTrendDirection = 'up' | 'flat'

export interface ScoreTrend {
  direction: ScoreTrendDirection
  /** Trailing text after the arrow glyph, e.g. "+2 wk" or "flat 9d · 118 commits — churn". */
  label: string
}

export interface ScoreCardProps {
  value: number
  max: number
  trend: ScoreTrend
  /** Fine-print line under the progress bar, e.g. "M4 prod env next · CI red (e2e)". */
  detail: string
  /** Tailwind fill class for the progress bar; defaults to the accent (blue). */
  barColorClassName?: string
}

/** `.score`/`.pbar`/`.fine` — a project's scoreboard fraction, trend, and progress bar. */
export function ScoreCard({ value, max, trend, detail, barColorClassName }: ScoreCardProps) {
  const pct = ratioPercent(value, max)
  return (
    <div>
      <div className="flex items-baseline gap-2">
        <span className="text-3xl font-bold tracking-[-0.02em] tabular-nums">
          {value}
          <small className="text-base font-normal text-fg-subtle"> /{max}</small>
        </span>
        <span className={`text-sm ${trend.direction === 'up' ? 'text-success' : 'text-danger'}`}>
          {trend.direction === 'up' ? '▲' : '■'} {trend.label}
        </span>
      </div>
      <div className="mt-[9px] mb-[7px] h-[5px] rounded-[3px] bg-[var(--mod-color-track)]">
        <i
          className={`block h-full rounded-[3px] ${barColorClassName ?? 'bg-accent'}`}
          style={{ width: `${pct}%` }}
        />
      </div>
      <div className="text-[11.5px] text-fg-subtle">{detail}</div>
    </div>
  )
}