import { MintelBlock } from "./types";

import type { Block } from "payload";

export const StatsGridBlock: MintelBlock = {
  slug: "statsGrid",
  labels: {
    singular: "Stats Grid",
    plural: "Stats Grids",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "StatsGrid",
    description:
      "Grid of 2–4 stat cards in a row. Use tilde (~) to separate stats, pipe (|) to separate value|label|subtext within each stat.",
    usageExample:
      "'<StatsGrid stats=\"53%|Mehr Umsatz|Rakuten 24~33%|Conversion Boost|nach CWV Fix~24%|Top 3 Ranking|bei bestandenen CWV\" />'",
  },
  fields: [
    {
      name: "stats",
      type: "array",
      fields: [
        {
          name: "label",
          type: "text",
          required: true,
          admin: {
            components: {
              afterInput: [
                "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
              ],
            },
            description: "Geben Sie den Text für label ein.",
          },
        },
        {
          name: "value",
          type: "text",
          required: true,
          admin: {
            components: {
              afterInput: [
                "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
              ],
            },
            description: "Geben Sie den Text für value ein.",
          },
        },
      ],
      admin: { description: "Fügen Sie Elemente zur Liste stats hinzu." },
    },
  ],
};