import { MintelBlock } from "./types";

import type { Block } from "payload";

export const PerformanceChartBlock: MintelBlock = {
  slug: "performanceChart",
  labels: {
    singular: "Performance Chart",
    plural: "Performance Charts",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "PerformanceChart",
    description:
      "A visual chart illustrating performance metrics (e.g. PageSpeed, TTFB) over time or in comparison. Use to emphasize technical improvements.",
    usageExample:
      '<PerformanceChart items={[{ label: "Vorher", value: 12 }, { label: "Nachher", value: 98 }]} />',
  },
  fields: [
    {
      name: "title",
      type: "text",
      defaultValue: "Website Performance",
      admin: {
        components: {
          afterInput: [
            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
          ],
        },
        description: "Geben Sie den Text für title ein.",
      },
    },
  ],
};