import { MintelBlock } from "./types";
import type { Block } from "payload";

export const MemeCardBlock: MintelBlock = {
  slug: "memeCard",
  labels: {
    singular: "Meme Card",
    plural: "Meme Cards",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "MemeCard",
    description:
      'Real meme image from memegen.link. template must be a valid memegen.link ID. IMPORTANT: Captions must be EXTREMELY SARCASTIC and PUNCHY (mocking bad B2B agencies, max 6 words per line). Best templates: drake (2-line prefer/dislike), gru (4-step plan backfire), disastergirl (burning house), fine (this is fine dog). Use German captions. Wrap in div with className="my-8".',
    usageExample: `<div className="my-8">
  <MemeCard template="drake" captions="47 WordPress Plugins installieren|Eine saubere Serverless Architektur" />
</div>`,
  },
  fields: [
    {
      name: "template",
      type: "text",
      required: true,
      admin: {
        description:
          "The template ID from memegen.link (e.g. 'drake', 'disastergirl')",
        components: {
          afterInput: [
            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
          ],
        },
      },
    },
    {
      name: "captions",
      type: "textarea",
      required: true,
      admin: {
        description:
          "Pipe-separated captions for the meme (e.g. 'Legacy Code|Mintel Stack'). Maximum 6 words per line.",
        components: {
          afterInput: [
            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
          ],
        },
      },
    },
  ],
};