import { MintelBlock } from "./types";

export const HeadingBlock: MintelBlock = {
  slug: "mintelHeading",
  labels: {
    singular: "Heading",
    plural: "Headings",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "Heading",
    description:
      "Flexible heading component with separated SEO and visual display levels.",
    usageExample:
      '\'<Heading seoLevel="h2" displayLevel="h3">Titel</Heading>\'',
  },
  fields: [
    {
      name: "text",
      type: "text",
      required: true,
      admin: {
        description: "Der Text der Überschrift.",
        components: {
          afterInput: [
            "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
          ],
        },
      },
    },
    {
      name: "seoLevel",
      type: "select",
      options: ["h1", "h2", "h3", "h4", "h5", "h6"],
      defaultValue: "h2",
      admin: { description: "Das semantische HTML-Tag für SEO." },
    },
    {
      name: "displayLevel",
      type: "select",
      options: ["h1", "h2", "h3", "h4", "h5", "h6"],
      defaultValue: "h2",
      admin: {
        description: "Die visuelle Größe der Überschrift (unabhängig von SEO).",
      },
    },
  ],
};