Risk banner

import { Alert, AlertDescription, AlertTitle, Badge } from "@paxeer/core";

export function RiskBanner({
  used = 62,
  limit = 100,
  label = "Gross notional",
}: {
  used?: number;
  limit?: number;
  label?: string;
}) {
  const ratio = limit === 0 ? 0 : used / limit;
  const hot = ratio >= 0.8;

  return (
    <Alert variant={hot ? "destructive" : "default"} data-slot="risk-banner">
      <AlertTitle>Risk chrome</AlertTitle>
      <AlertDescription className="flex flex-wrap items-center gap-2">
        <span>
          {label}: {used} / {limit}
        </span>
        <Badge variant={hot ? "destructive" : "secondary"}>
          {(ratio * 100).toFixed(0)}% used
        </Badge>
      </AlertDescription>
    </Alert>
  );
}