/apps/glucast/connect

import { button } 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 { navbar } from "@hedia/hexui/components/navbar";
import { prose } from "@hedia/hexui/components/prose";
import { screen } from "@hedia/hexui/components/screen";
import { a, div, h1, h2, img, li, p, ul } from "@hedia/html/elements";

export function connect() {
  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("Connect to Hedia Forecast"),
        p(
          "Hedia uses your real-time CGM data to predict your glucose 30 mins ahead of time. Hedia Forecast will get access to the following data:",
        ),
        ul(li("User ID, Glucose data")),
        p("For more information on how your CGM data will be processed, see Hedia's privacy notice.."),
      ),
    ),
    footer(button({ kind: "primary" }, "Connect")),
  );
}

export function success() {
  return screen(
    header(navbar(a({ href: "#" }, "Close"), h2("Forecast"))),
    content(
      { style: "justify-content: center;" },
      div(
        { style: "display: flex; flex-direction: column; align-items: center;" },
        img({ src: "/apps/glucast/checkmark.gif", width: "256", height: "256" }),
        prose(h2({ align: "center" }, "Hedia Forecast connected")),
      ),
    ),
  );
}