import { MintelBlock } from "./types";

import type { Block } from "payload";

export const WebVitalsScoreBlock: MintelBlock = {
  slug: "webVitalsScore",
  labels: {
    singular: "Web Vitals Score",
    plural: "Web Vitals Scores",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "WebVitalsScore",
    description:
      "Displays Core Web Vitals (LCP, INP, CLS) in a premium card layout with automatic traffic light coloring (Good/Needs Improvement/Poor). Use for performance audits or comparisons.",
    usageExample: "'<WebVitalsScore values={{ lcp: 2.5, inp: 200, cls: 0.1",
  },
  fields: [
    {
      name: "lcp",
      type: "number",
      required: true,
      admin: { description: "Largest Contentful Paint (s)" },
    },
    {
      name: "inp",
      type: "number",
      required: true,
      admin: { description: "Interaction to Next Paint (ms)" },
    },
    {
      name: "cls",
      type: "number",
      required: true,
      admin: { description: "Cumulative Layout Shift" },
    },
    {
      name: "description",
      type: "text",
      admin: {
        components: {
          afterInput: [
            "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
          ],
        },
        description: "Geben Sie den Text für description ein.",
      },
    },
  ],
};