import React from 'react'

function formatXp(value) {
  return new Intl.NumberFormat().format(Number(value || 0))
}

function clampPercent(value) {
  const numeric = Number(value || 0)
  if (!Number.isFinite(numeric)) return 0
  return Math.max(0, Math.min(100, numeric))
}

function cx(...parts) {
  return parts.filter(Boolean).join(' ')
}

export default function XPProgressBar({
  xp = 0,
  currentLevelXp = 0,
  nextLevelXp = 100,
  progressPercent = 0,
  maxLevel = false,
  className = '',
}) {
  const percent = maxLevel ? 100 : clampPercent(progressPercent)

  return (
    <div className={cx('space-y-2', className)}>
      <div className="flex items-center justify-between gap-3 text-xs text-slate-300">
        <span>{formatXp(xp)} XP</span>
        <span>
          {maxLevel ? 'Max level reached' : `${formatXp(currentLevelXp)} / ${formatXp(nextLevelXp)} XP`}
        </span>
      </div>
      <div className="h-2.5 overflow-hidden rounded-full bg-white/10 ring-1 ring-white/10">
        <div
          className="h-full rounded-full bg-[linear-gradient(90deg,#38bdf8_0%,#a78bfa_55%,#f59e0b_100%)] transition-[width] duration-500"
          style={{ width: `${percent}%` }}
        />
      </div>
    </div>
  )
}