import { MintelBlock } from "./types";

import type { Block } from "payload";

export const CarouselBlock: MintelBlock = {
  slug: "carousel",
  labels: {
    singular: "Carousel",
    plural: "Carousels",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "Carousel",
    description:
      "Interactive swipeable slider for multi-step explanations. IMPORTANT: items array must contain at least 2 items with substantive title and content text (no empty content).",
    usageExample:
      '\'<Carousel items={[{ title: "Schritt 1", content: "Analyse der aktuellen Performance..."',
  },
  fields: [
    {
      name: "slides",
      type: "array",
      fields: [
        {
          name: "image",
          type: "upload",
          relationTo: "media",
          admin: { description: "Laden Sie die Datei für image hoch." },
        },
        {
          name: "caption",
          type: "text",
          admin: {
            components: {
              afterInput: [
                "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
              ],
            },
            description: "Geben Sie den Text für caption ein.",
          },
        },
      ],
      admin: { description: "Fügen Sie Elemente zur Liste slides hinzu." },
    },
  ],
};