import { MintelBlock } from "./types";

import type { Block } from "payload";

export const IconListBlock: MintelBlock = {
  slug: "iconList",
  labels: {
    singular: "Icon List",
    plural: "Icon Lists",
  },
  admin: {
    group: "MDX Components",
  },
  ai: {
    name: "IconList",
    description:
      "Checklist with check/cross icons. Wrap IconListItem children inside.",
    usageExample: `<IconList>
  <IconListItem check>
    <strong>Zero-Computation:</strong> Statische Seiten, kein Serverwarten.
  </IconListItem>
  <IconListItem cross>
    <strong>Legacy CMS:</strong> Datenbankabfragen bei jedem Request.
  </IconListItem>
</IconList>`,
  },
  fields: [
    {
      name: "items",
      type: "array",
      fields: [
        {
          name: "icon",
          type: "text",
          admin: {
            description: "Lucide icon",
            components: { Field: "@/src/payload/components/IconSelector" },
          },
        },
        {
          name: "title",
          type: "text",
          required: true,
          admin: {
            components: {
              afterInput: [
                "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
              ],
            },
            description: "Geben Sie den Text für title ein.",
          },
        },
        {
          name: "description",
          type: "textarea",
          admin: {
            components: {
              afterInput: [
                "@mintel/payload-ai/components/AiFieldButton#AiFieldButton",
              ],
            },
            description: "Geben Sie den mehrzeiligen Text für description ein.",
          },
        },
      ],
      admin: { description: "Fügen Sie Elemente zur Liste items hinzu." },
    },
  ],
};