/apps/glucast/disconnect

import { button, buttons } from "@hedia/hexui/components/button";
import { content } from "@hedia/hexui/components/content";
import { footer } from "@hedia/hexui/components/footer";
import { header } from "@hedia/hexui/components/header";
import { modal } from "@hedia/hexui/components/modal";
import { navbar } from "@hedia/hexui/components/navbar";
import { prose } from "@hedia/hexui/components/prose";
import { screen } from "@hedia/hexui/components/screen";
import { a, div, form, h1, h2, img, p } from "@hedia/html/elements";

export function disconnect() {
  return screen(
    header(navbar(a({ href: "#" }, "Close"), h2("Forecast"))),
    content(
      div(
        { style: "display: inline-block;" },
        div(
          {
            style: "display: inline-flex; gap: 8px; background: #5C21BA; padding: 8px; padding-right: 12px; border-radius: 8px;",
          },
          img({ src: "/apps/glucast/diamond.svg" }),
          prose(p({ style: "color: var(--color-white-900);" }, "Glucose Forecast")),
        ),
      ),
      prose(
        h1("Hedia Forecast"),
        p(
          "Your Hedia account is connected with Hedia Forecast. Data from your CGM sensor is delivered to Hedia Forecast to predict your glucose 30 mins ahead of time. Hedia Diabetes Assistant does NOT give alarms related to high- or low glucose.",
        ),
      ),
    ),
    footer(button({ kind: "secondary-danger", "data-target": "#modal", "data-action": "showModal" }, "Disconnect")),
    modal(
      { id: "modal" },
      content(
        prose(
          h2("Disconnect Hedia Forecast?"),
          p("Hedia Forecast will stop receiving CGM data, and stop predicting your glucose."),
        ),
        form(
          { id: "form" },
          buttons(
            { arrangement: "vertical" },
            button({ kind: "danger", type: "submit", form: "form" }, "Disconnect Hedia Forecast"),
            button({ kind: "secondary", type: "button", "data-action": "close" }, "Cancel"),
          ),
        ),
      ),
    ),
  );
}