Document

import { Document, Section, Paragraph } from "@cordel/react-docx";

const MyDocument = () => (
  <Document>
    <Section>
      <Paragraph>Hello</Paragraph>
    </Section>
  </Document>
);

<Document
  styles={{
    defaultFont: {
      name: "Arial",
      size: 11,
    },
    heading1: {
      font: "Arial",
      size: 24,
      bold: true,
      color: "1F4E78",
    },
    heading2: {
      font: "Arial",
      size: 18,
      bold: true,
      color: "2E75B5",
    },
  }}
>
  <Section>
    <H1>Uses heading1 style</H1>
    <H2>Uses heading2 style</H2>
    <Paragraph>Uses defaultFont</Paragraph>
  </Section>
</Document>

interface FontConfig {
  name?: string;  // Font family
  size?: number;  // Size in points
}

interface HeadingStyleConfig {
  font?: string;
  size?: number;
  color?: string;   // Hex without #
  bold?: boolean;
  italic?: boolean;
}

<Document
  metadata={{
    title: "Invoice #1234",
    creator: "Acme Corp",
    subject: "Monthly billing",
    description: "Invoice for January 2024",
    keywords: "invoice, billing",
    category: "Finance",
  }}
>
  <Section>
    <Paragraph>Content</Paragraph>
  </Section>
</Document>

interface DocumentMetadata {
  title?: string;
  subject?: string;
  creator?: string;
  description?: string;
  keywords?: string;        // Comma-separated
  lastModifiedBy?: string;
  category?: string;
}

<Document className="font-serif text-gray-800">
  <Section>
    <Paragraph>Inherits font-serif and text-gray-800</Paragraph>
    <Paragraph className="text-blue-600">
      Inherits font-serif, overrides color
    </Paragraph>
  </Section>
</Document>

<Document>
  <Section>
    <H1>Title Page</H1>
  </Section>

  <Section margins={{ top: "0.5in" }}>
    <Paragraph>Main content</Paragraph>
  </Section>

  <Section pageSize={{ orientation: "landscape" }}>
    <Paragraph>Wide content</Paragraph>
  </Section>
</Document>