/*
 * The deployment failure this repo makes most often, made legible. It names the
 * variable, the value baked in, and both reasons it fails — unreachable from
 * the browser, or missing from admin's ADMIN_ORIGIN.
 */
export function NotConnectedPanel({ url }: { url: string }) {
    return (
        <div className="grid max-w-2xl gap-3 rounded border border-expired bg-panel p-5">
            <h2 className="text-xl text-expired">Not connected to the licensing service</h2>
            {url ? (
                <p className="text-ink-2">
                    This build points at <code className="text-ink">ADMIN_API_URL</code> ={" "}
                    <code className="text-ink">{url}</code>, which did not respond.
                </p>
            ) : (
                <p className="text-ink-2">
                    <code className="text-ink">ADMIN_API_URL</code> was not set when this app was
                    built, so there is nowhere to send requests.
                </p>
            )}
            <p className="text-[0.82rem] text-ink-3">
                The value is baked in when the image is built and has to be reachable from your
                browser, not just from the server. It also has to appear in the licensing
                service&rsquo;s <code>ADMIN_ORIGIN</code>, or the browser blocks every request.
            </p>
        </div>
    );
}