shoc-frontend-new/src/app/(protected)/completion-docs/_components/completion-template-sections.tsx

import type { ReactNode } from "react";
import { Text } from "@/components/ui/text";
import { AUTO_POPULATED_FIELDS } from "@/domain/completion-templates/constants/completion-template-constants";
import { SAFETY_BULLETS } from "@/domain/work-orders/utils/completion-doc-procedures";

export function SectionTitle({ children }: { children: ReactNode }) {
  return (
    <Text as="div" variant="heading" family="body" sx={{ fontSize: 16, fontWeight: 600 }}>
      {children}
    </Text>
  );
}

export function FieldLabel({ children, hint }: { children: ReactNode; hint?: string }) {
  return (
    <div className="flex items-baseline gap-1.5" style={{ marginBottom: 4 }}>
      <Text
        variant="caption"
        tone="muted"
        sx={{ fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.06em" }}
      >
        {children}
      </Text>
      {hint !== undefined && (
        <Text variant="caption" tone="muted" sx={{ fontSize: 11 }}>
          {hint}
        </Text>
      )}
    </div>
  );
}

export function AutoPopulatedFields() {
  return (
    <div>
      <FieldLabel>Auto-populated fields</FieldLabel>
      <ul className="m-0 flex list-none flex-wrap items-center gap-1.5 p-0">
        {AUTO_POPULATED_FIELDS.map((field) => (
          <li
            key={field}
            className="inline-flex items-center"
            style={{
              background: "var(--color-bg-muted)",
              color: "var(--color-text-muted)",
              fontSize: 12,
              padding: "2px 8px",
              borderRadius: 4,
            }}
          >
            {field}
          </li>
        ))}
      </ul>
    </div>
  );
}

/** The standard bullets every generated document prints; never editable per template. */
export function StandardSafetyBullets({ extra }: { extra?: string | null }) {
  return (
    <ul aria-label="Safety notes" style={{ margin: "0 0 8px", paddingLeft: 18 }}>
      {SAFETY_BULLETS.map((bullet) => (
        <li
          key={bullet}
          style={{ fontSize: 12.5, color: "var(--color-text-muted)", margin: "2px 0" }}
        >
          {bullet}
        </li>
      ))}
      {Boolean(extra) && (
        <li style={{ fontSize: 12.5, margin: "2px 0", whiteSpace: "pre-wrap" }}>{extra}</li>
      )}
    </ul>
  );
}