import { runnerTierRates, PRICING_BASIS, usd } from "~/lib/pricing-display";

/** The compute (i) explanation: why runner sizes cost different amounts, and how compute credit is spent. */
export function ComputeRatesNote() {
  const tiers = runnerTierRates();
  return (
    <div className="space-y-2">
      <p>
        Cloud runners and editors run on Cloudflare Containers. Each size is priced by the resources it reserves:{" "}
        {usd(PRICING_BASIS.vcpuHour)} per vCPU-hour, {usd(PRICING_BASIS.gibHour)} per GiB-hour of memory and{" "}
        {usd(PRICING_BASIS.diskGbHour)} per GB-hour of disk, which is Cloudflare's cost times {PRICING_BASIS.markup}.
        Time is metered per second.
      </p>
      <table className="w-full text-left">
        <thead className="text-kumo-subtle">
          <tr>
            <th className="py-1 font-normal">Size</th>
            <th className="py-1 font-normal">Resources</th>
            <th className="py-1 text-right font-normal">Per hour</th>
            <th className="py-1 text-right font-normal">Credit used</th>
          </tr>
        </thead>
        <tbody className="font-mono">
          {tiers.map((tier) => (
            <tr key={tier.meter}>
              <td className="py-0.5">{tier.meter === "compute.editor" ? "editor" : tier.instance}</td>
              <td className="py-0.5">
                {tier.vcpu} vCPU, {tier.memoryGib} GiB, {tier.diskGb} GB
              </td>
              <td className="py-0.5 text-right">{usd(tier.perHour)}</td>
              <td className="py-0.5 text-right">{tier.creditMultiplier.toFixed(2)}x</td>
            </tr>
          ))}
        </tbody>
      </table>
      <p>
        Compute credit is sold in standard-1 hours. Larger sizes spend it faster by the multiplier above, so one
        standard-4 hour uses about {tiers[2]?.creditMultiplier.toFixed(1)} credit hours. Self-hosted runners are free.
      </p>
    </div>
  );
}