/*
 * 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>
    );
}