import * as React from "react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip";
export function PatientStatusBadge({ status, className = "", size = 10, }) {
    const { bg, label } = getVisuals(status);
    return (<TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <span aria-label={`Patient status: ${label}`} className={`inline-block rounded-full shadow ${className}`} style={{
            width: size,
            height: size,
            backgroundColor: bg,
            position: "absolute",
            top: "-6px", // stick out above card
            right: "-6px", // stick out right
        }}/>
        </TooltipTrigger>
        <TooltipContent side="top" className="px-2 py-1 text-xs">
          {label}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>);
}
function getVisuals(status) {
    switch (status) {
        case "ACTIVE":
            return { label: "Active", bg: "#16A34A" }; // MEDICAL GREEN (not same as staff green)
        case "INACTIVE":
            return { label: "Inactive", bg: "#DC2626" };
        case "PLAN_NOT_ACCEPTED":
            return { label: "Plan Not Accepted", bg: "#F59E0B" }; // amber
        default:
            return { label: "Unknown", bg: "#6B7280" };
    }
}
