import { Heading, HeadingLevel } from "@ariakit/react";
import { LoadingIndicator } from "@indietabletop/appkit";
import type { ReactNode } from "react";
import * as css from "./style.css.ts";

export function InfoPage(props: {
  heading: string;
  description: ReactNode;
  action?: ReactNode;
}) {
  return (
    <HeadingLevel>
      <div className={css.page}>
        <Heading className={css.heading}>{props.heading}</Heading>
        <p className={css.description}>{props.description}</p>
        {props.action && (
          <div
            style={{
              marginBlockStart: "1rem",
              marginInline: "auto",
              inlineSize: "fit-content",
            }}
          >
            {props.action}
          </div>
        )}
      </div>
    </HeadingLevel>
  );
}

export function LoadingPage() {
  return (
    <div className={css.loadingPage}>
      <LoadingIndicator />
    </div>
  );
}

export function LoadingView() {
  return (
    <div className={css.loadingView}>
      <LoadingIndicator />
    </div>
  );
}