/services/id/admin

import { button } from "@hedia/hexui/components/button";
import { card } from "@hedia/hexui/components/card";
import { content } from "@hedia/hexui/components/content";
import { header } from "@hedia/hexui/components/header";
import { logo } from "@hedia/hexui/components/logo";
import { menu, menuDivider, menuItem } from "@hedia/hexui/components/menu";
import { navbar } from "@hedia/hexui/components/navbar";
import { prose } from "@hedia/hexui/components/prose";
import { sidebar, sidebarBackdrop, sidebarItem } from "@hedia/hexui/components/sidebar";
import { site } from "@hedia/hexui/components/site";
import { div, form, h2, h3, p, span } from "@hedia/html/elements";
import { homeBoldIcon, lockBoldIcon, menuBoldIcon, rocketBoldIcon, userBoldIcon } from "@hedia/iconly/bold";
import { usersOutlineIcon } from "@hedia/iconly/outline";

export default function AdminDashboard() {
  return site(
    header(
      navbar(
        button({ kind: "secondary", shape: "round", "data-action": "toggle-sidebar" }, menuBoldIcon()),
        h2(logo()),
        div(
          { style: "position: relative;" },
          button(
            {
              "data-action": "toggle-menu",
              "data-target": "#userMenu",
              kind: "secondary",
              shape: "round",
              type: "button",
            },
            userBoldIcon(),
          ),
          menu(
            { id: "userMenu" },
            menuItem({ href: "#", icon: userBoldIcon() }, "Account"),
            menuDivider(),
            form(
              { method: "post", action: "/logout" },
              menuItem({ type: "submit", icon: lockBoldIcon() }, "Log out"),
            ),
          ),
        ),
      ),
    ),
    sidebarBackdrop(),
    sidebar(
      sidebarItem({ href: "#", icon: homeBoldIcon(), title: "Dashboard", active: true }),
      sidebarItem({ href: "#", icon: rocketBoldIcon(), title: "Apps" }),
      sidebarItem({ href: "#", icon: usersOutlineIcon(), title: "Users" }),
    ),
    content(
      { alignment: "top" },
      prose(h2("Dashboard")),
      div(
        { class: "stack" },
        card(h3("Users"), p(span({ class: "text-green" }, "1,234"), " registered users")),
        card(h3("Apps"), p(span({ class: "text-green" }, "12"), " active apps")),
        card(h3("Installations"), p(span({ class: "text-green" }, "5,678"), " total installations")),
      ),
    ),
  );
}