import type { SharedLab } from "../../api/types";
import { plotLab, type LabPoint } from "../../logic/charts";
import { cn, StatusPill } from "../kit";

/** High or low exactly as the record flags it; nothing for normal or no flag (a fact, not advice). */
export function FlagPill({ flag, size = "sm" }: { flag: SharedLab["flag"]; size?: "sm" | "md" }) {
  if (flag !== "high" && flag !== "low") return null;
  return (
    <StatusPill tone="amber" size={size} icon={flag === "high" ? "arrow-up-circle-fill" : "arrow-down-circle-fill"} title="As flagged on the record">
      {flag === "high" ? "High" : "Low"}
    </StatusPill>
  );
}

export const NewPill = ({ children = "New since you last looked" }: { children?: string }) => (
  <StatusPill tone="blue" size="sm" icon="sparkling-fill">
    {children}
  </StatusPill>
);

/** A tiny soft-area line of the earlier results. Decorative: the row says the numbers. */
export function Sparkline({ points, className }: { points: LabPoint[]; className?: string }) {
  const plot = plotLab({ points, range: null }, 2, 0.2);
  if (!plot.line) return null;
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" className={cn("block h-6 w-14 shrink-0 overflow-visible", className)}>
      <path d={plot.area} className="fill-teal-icon" fillOpacity={0.1} />
      <path d={plot.line} fill="none" className="stroke-teal-icon" strokeWidth={1.5} strokeLinecap="round" vectorEffect="non-scaling-stroke" />
    </svg>
  );
}