export default function CompletionBar({ value = 0, label }) {
  const pct = parseFloat((value * 100).toFixed(1))
  return (
    <div className="w-full">
      {label && <p className="text-slate-400 text-xs mb-1">{label}</p>}
      <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
        <div
          className="h-full bg-emerald-500 rounded-full transition-all duration-500"
          style={{ width: `${pct}%` }}
        />
      </div>
      <p className="text-right text-xs text-slate-400 mt-0.5">{pct}%</p>
    </div>
  )
}
