import { MintelBlock } from "./types";

import type { Block } from "payload";

export const ButtonBlock: MintelBlock = {
  slug: "buttonBlock",
  labels: {
    singular: "Button Block",
    plural: "Button Blocks",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "Button",
    description:
      "DEPRECATED: Use <LeadMagnet /> instead for main CTAs. Only use for small secondary links.",
    usageExample:
      '<Button href="/contact" variant="outline">Webprojekt anfragen</Button>',
  },
  fields: [
    {
      name: "label",
      type: "text",
      required: true,
      admin: {
        components: {
          afterInput: [
            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
          ],
        },
        description: "Geben Sie den Text für label ein.",
      },
    },
    {
      name: "href",
      type: "text",
      required: true,
      admin: { description: "Geben Sie den Text für href ein." },
    },
    {
      name: "variant",
      type: "select",
      options: [
        { label: "Primary", value: "primary" },
        { label: "Outline", value: "outline" },
        { label: "Ghost", value: "ghost" },
      ],
      defaultValue: "primary",
      admin: { description: "Wählen Sie eine Option für variant aus." },
    },
    {
      name: "size",
      type: "select",
      options: [
        { label: "Normal", value: "normal" },
        { label: "Large", value: "large" },
      ],
      defaultValue: "normal",
      admin: { description: "Wählen Sie eine Option für size aus." },
    },
    {
      name: "showArrow",
      type: "checkbox",
      defaultValue: true,
      admin: { description: "Wert für showArrow eingeben." },
    },
  ],
};