import React from "react";
import InfoTooltip from "./ui/infoTooltip.js";

/**
 * Compact badge that shows a 0-100 “readiness” score.
 *
 * Props:
 *   • score (Number 0-100) – required
 */
export default function ReadinessPill({ score = 0 }) {
  const pct = Math.max(0, Math.min(100, Math.round(score)));

  const bg =
    pct >= 80 ? "bg-green-600"
  : pct >= 60 ? "bg-yellow-500"
              : "bg-red-600";

  return (
    <span
      className={`ml-2 inline-flex items-center gap-1 rounded-full px-2 py-px text-xs font-semibold text-white ${bg}`}
    >
      {pct}
      <InfoTooltip message="How long your portfolio can fund your desired spending, mapped onto a 30-year scale (100 ≈ ≥30 yrs)" />
    </span>
  );
}