import { PROVIDER_DISPLAY_NAMES, type ServerProviderStatus } from "@t3tools/contracts";import { memo } from "react";import { Alert, AlertDescription, AlertTitle } from "../ui/alert";import { CircleAlertIcon } from "lucide-react"; export const ProviderHealthBanner = memo(function ProviderHealthBanner({  status,}: {  status: ServerProviderStatus | null;}) {  if (!status || status.status === "ready") {    return null;  }   const providerLabel = PROVIDER_DISPLAY_NAMES[status.provider] ?? status.provider;  const defaultMessage =    status.status === "error"      ? `${providerLabel} provider is unavailable.`      : `${providerLabel} provider has limited availability.`;  const title = `${providerLabel} provider status`;   return (    <div className="pt-3 mx-auto max-w-3xl">      <Alert variant={status.status === "error" ? "error" : "warning"}>        <CircleAlertIcon />        <AlertTitle>{title}</AlertTitle>        <AlertDescription className="line-clamp-3" title={status.message ?? defaultMessage}>          {status.message ?? defaultMessage}        </AlertDescription>      </Alert>    </div>  );});