import type { Metadata } from "next";

import { PageHeader } from "@/components/design-system/page-header";
import { CardsSection } from "@/components/design-system/sections/data-display/cards";
import { ChartsSection } from "@/components/design-system/sections/data-display/charts";
import { OtherSection } from "@/components/design-system/sections/data-display/other";
import { RecordBitsSection } from "@/components/design-system/sections/data-display/record-bits";
import { TablesSection } from "@/components/design-system/sections/data-display/tables";

export const metadata: Metadata = { title: "Data display | Medora Design System" };

export default function DataDisplayPage() {
  return (
    <>
      <PageHeader
        title="Data display"
        description="How Medora presents records and measures: dense tables, stat tiles, charts, lists and the states that appear when there is nothing to show yet."
      />
      <TablesSection />
      <RecordBitsSection />
      <CardsSection />
      <ChartsSection />
      <OtherSection />
    </>
  );
}