components/MethodReceipt.tsx

import type { Method, Source, Support } from "@/lib/data";

/**
 * The four capabilities, in the order they appear on every row. Lane widths
 * are fixed so a capability lands at the same x on every line — that is what
 * makes the card scannable down a column without a header.
 */
const LANES = [
  { key: "load", label: "load", width: "w-[42px]" },
  { key: "compile", label: "compile", width: "w-[64px]" },
  { key: "tune", label: "tune", width: "w-[44px]" },
  { key: "save", label: "save", width: "w-[40px]" },
] as const;

interface Cell {
  text: string;
  support: Support;
}

function cell(label: string, support: Support): Cell {
  return { text: label, support };
}

function cellsFor(m: Method): Cell[] {
  return [
    cell("load", m.onTheFly ? "yes" : "no"),
    cell("compile", m.compile),
    cell("tune", m.peft),
    cell("save", m.serializable),
  ];
}

/** Supported reads in the accent; everything else recedes. */
function toneFor(support: Support): string {
  if (support === "yes") return "text-forest";
  if (support === "partial") return "text-smoke";
  return "text-ash";
}

/**
 * Methods arrive in recommendation order, best first, so the receipt keeps it.
 */
export default function MethodReceipt({ methods, source }: { methods: Method[]; source: Source }) {
  if (methods.length === 0) {
    return (
      <div className="w-[466px] rounded-[6px] bg-paper px-[17px] py-4 ring-hairline shadow-[0_6px_20px_rgb(0_0_0/7%)]">
        <p className="font-mono text-[13px] text-graphite">
          {source === "on-the-fly"
            ? "Nothing quantizes to this precision on the fly. Try a checkpoint."
            : "Nothing supports this precision here."}
        </p>
      </div>
    );
  }

  return (
    <div className="w-[466px] rounded-[6px] bg-paper px-[17px] pb-[17px] pt-[15px] ring-hairline shadow-[0_6px_20px_rgb(0_0_0/7%)]">
      <div className="flex flex-col gap-[9px]">
        {methods.map((m) => (
          <div key={m.id} className="flex items-center gap-[9px]">
            <a
              href={m.docs}
              target="_blank"
              rel="noreferrer"
              title={`${m.name} docs`}
              className="w-[150px] shrink-0 truncate font-mono text-[13px] text-obsidian underline decoration-hairline decoration-1 underline-offset-[3px] hover:decoration-graphite focus-visible:decoration-graphite"
            >
              {m.name}
            </a>
            <span className="h-px flex-1 border-b border-dashed border-hairline" />
            <span className="flex shrink-0 gap-2.5">
              {cellsFor(m).map((c, i) => (
                <span
                  key={LANES[i].key}
                  className={`${LANES[i].width} font-mono text-[11px] ${toneFor(c.support)}`}
                >
                  {c.text}
                </span>
              ))}
            </span>
          </div>
        ))}
      </div>

      <div className="mt-[11px] flex flex-col gap-[3px] border-t border-dashed border-hairline pt-[11px]">
        <p className="font-mono text-[10px] leading-[15px] tracking-[0.04em] text-graphite">
          load = quantizes as it loads, no prep step
        </p>
        <p className="font-mono text-[10px] leading-[15px] tracking-[0.04em] text-graphite">
          compile = works under torch.compile
        </p>
        <p className="font-mono text-[10px] leading-[15px] tracking-[0.04em] text-graphite">
          tune = fine-tunes with PEFT adapters
        </p>
        <p className="font-mono text-[10px] leading-[15px] tracking-[0.04em] text-graphite">
          save = save_pretrained keeps it quantized
        </p>
      </div>
    </div>
  );
}