import type { Metadata } from "next";

import { OnThisPage } from "@/components/design-system/on-this-page";
import { PageHeader } from "@/components/design-system/page-header";
import { EditableGridSection } from "@/components/design-system/sections/operations/grid-demo";
import { ReviewCommitSection } from "@/components/design-system/sections/operations/review-demo";
import { EmptyHelpSection } from "@/components/design-system/sections/operations/system";
import { WizardSection } from "@/components/design-system/sections/operations/wizard-demo";

export const metadata: Metadata = { title: "Workflow building blocks | Medora Design System" };

export default function BuildingBlocksPage() {
  return (
    <>
      <PageHeader title="Workflow building blocks" description="General patterns the modules are built from: multi-step wizards, review before commit, spreadsheet-style entry, and what to say when a list is empty or an action is destructive." />
      <OnThisPage />
      <WizardSection />
      <ReviewCommitSection />
      <EditableGridSection />
      <EmptyHelpSection />
    </>
  );
}