import { MintelBlock } from "./types";

import type { Block } from "payload";

export const MarkerBlock: MintelBlock = {
  slug: "marker",
  labels: {
    singular: "Marker",
    plural: "Markers",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "Marker",
    description:
      "Inline highlight (yellow marker effect) for emphasizing key phrases within paragraphs.",
    usageExample: "'<Marker>entscheidender Wettbewerbsvorteil</Marker>'",
  },
  fields: [
    {
      name: "text",
      type: "text",
      required: true,
      admin: {
        components: {
          afterInput: [
            "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
          ],
        },
        description: "Geben Sie den Text für text ein.",
      },
    },
    {
      name: "color",
      type: "text",
      admin: {
        description: "Hex or rgba color",
        components: { Field: "@/src/payload/components/ColorPicker" },
      },
    },
    {
      name: "delay",
      type: "number",
      defaultValue: 0,
      admin: {
        description: "Tragen Sie einen numerischen Wert für delay ein.",
      },
    },
  ],
};