// src/components/docs/examples/DocsExamplesPage.tsx
import { listExamples } from "@contractspec/module.examples";
import {
  ButtonLink,
  DataViewList,
  StatusChip
} from "@contractspec/lib.design-system";
import { VStack, HStack } from "@contractspec/lib.ui-kit-web/ui/stack";
import { H1, Muted } from "@contractspec/lib.ui-kit-web/ui/typography";
import { ExampleCatalogDataView } from "@contractspec/lib.contracts-spec/docs";
import { jsx, jsxs } from "react/jsx-runtime";
"use client";
function buildReferenceRoute(key) {
  return `/docs/reference/${key}/${key}`;
}
function DocsExamplesPage() {
  const items = listExamples().map((example) => {
    const title = example.meta.title ?? example.meta.key;
    return {
      id: example.meta.key,
      title,
      summary: example.meta.summary ?? example.meta.description,
      route: buildReferenceRoute(example.meta.key),
      tags: example.meta.tags,
      sandboxEnabled: example.surfaces.sandbox.enabled
    };
  }).sort((a, b) => a.title.localeCompare(b.title));
  const listSpec = {
    ...ExampleCatalogDataView,
    view: {
      ...ExampleCatalogDataView.view,
      kind: "list"
    }
  };
  return /* @__PURE__ */ jsxs(VStack, {
    gap: "xl",
    children: [
      /* @__PURE__ */ jsxs(VStack, {
        gap: "sm",
        children: [
          /* @__PURE__ */ jsx(H1, {
            children: "Examples"
          }),
          /* @__PURE__ */ jsx(Muted, {
            children: "Curated examples and templates you can explore in the sandbox or use as reference implementations."
          })
        ]
      }),
      /* @__PURE__ */ jsx(DataViewList, {
        spec: listSpec,
        items,
        emptyState: /* @__PURE__ */ jsx(Muted, {
          children: "No examples available."
        }),
        renderActions: (example) => {
          return /* @__PURE__ */ jsxs(HStack, {
            gap: "xs",
            justify: "end",
            children: [
              example.sandboxEnabled ? /* @__PURE__ */ jsx(ButtonLink, {
                href: "/sandbox",
                size: "sm",
                variant: "outline",
                children: "Sandbox"
              }) : null,
              /* @__PURE__ */ jsx(ButtonLink, {
                href: example.route,
                size: "sm",
                children: "Reference"
              }),
              example.tags?.[0] ? /* @__PURE__ */ jsx(StatusChip, {
                size: "sm",
                label: example.tags[0]
              }) : null
            ]
          });
        }
      })
    ]
  });
}
export {
  DocsExamplesPage
};
