import { MintelBlock } from "./types";

import type { Block } from "payload";

export const PremiumComparisonChartBlock: MintelBlock = {
  slug: "premiumComparisonChart",
  labels: {
    singular: "Premium Comparison Chart",
    plural: "Premium Comparison Charts",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "PremiumComparisonChart",
    description:
      "Advanced chart for comparing performance metrics with industrial aesthetics.",
    usageExample:
      '\'<PremiumComparisonChart title="TTFB Vergleich" items={[{ label: "Alt", value: 800, max: 1000, color: "red"',
  },
  fields: [
    {
      name: "title",
      type: "text",
      admin: {
        components: {
          afterInput: [
            "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
          ],
        },
        description: "Geben Sie den Text für title ein.",
      },
    },
    {
      name: "subtitle",
      type: "text",
      admin: {
        components: {
          afterInput: [
            "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
          ],
        },
        description: "Geben Sie den Text für subtitle ein.",
      },
    },
    {
      name: "datasets",
      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: "number",
          required: true,
          admin: {
            description: "Tragen Sie einen numerischen Wert für value ein.",
          },
        },
        {
          name: "max",
          type: "number",
          defaultValue: 100,
          admin: {
            description: "Tragen Sie einen numerischen Wert für max ein.",
          },
        },
        {
          name: "unit",
          type: "text",
          admin: {
            components: {
              afterInput: [
                "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
              ],
            },
            description: "Geben Sie den Text für unit ein.",
          },
        },
        {
          name: "color",
          type: "text",
          admin: {
            components: { Field: "@/src/payload/components/ColorPicker" },
            description: "Geben Sie den Text für color ein.",
          },
        },
        {
          name: "description",
          type: "text",
          admin: {
            components: {
              afterInput: [
                "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
              ],
            },
            description: "Geben Sie den Text für description ein.",
          },
        },
      ],
      admin: { description: "Fügen Sie Elemente zur Liste datasets hinzu." },
    },
  ],
};