// A module author's supported UI source: it imports both approved design packages and must
// typecheck cleanly under the exact browser project a module uses for its own UI
// (`browser-react.json`, `"types": []`).
import { designToken, ekklesiaDesignTokens } from "@ekklesia/design-tokens";
import type { ReactElement } from "react";
import { Badge, Button, EkklesiaUiStyles, Panel } from "../../src/index.js";

export function ModuleScreen(): ReactElement {
  return (
    <>
      <EkklesiaUiStyles />
      <Panel title="Slides">
        <p style={{ color: designToken("text.secondary") }}>
          {ekklesiaDesignTokens.list().length} tokens available.
        </p>
        <Badge tone="success">Ready</Badge>
        <Button variant="primary">Add</Button>
      </Panel>
    </>
  );
}