import type { Block } from 'payload'

export const CardGridBlock: Block = {
  slug: 'card-grid-block',
  labels: {
    singular: 'Karten-Raster',
    plural: 'Karten-Raster',
  },
  fields: [
    {
      name: 'headline',
      type: 'text',
      label: 'Überschrift',
      localized: true,
    },
    {
      name: 'cards',
      type: 'array',
      label: 'Karten',
      minRows: 1,
      maxRows: 6,
      fields: [
        {
          name: 'mediaType',
          type: 'select',
          defaultValue: 'none',
          label: 'Visuelles Element',
          options: [
            { label: 'Keins', value: 'none' },
            { label: 'Bild', value: 'image' },
            { label: 'Icon', value: 'icon' },
          ],
        },
        {
          name: 'image',
          type: 'upload',
          relationTo: 'media',
          label: 'Bild',
          admin: {
            condition: (_, siblingData) => siblingData?.mediaType === 'image',
          },
        },
        {
          name: 'icon',
          type: 'text',
          label: 'Icon-Name',
          admin: {
            description: 'Lucide Icon-Name (z.B. "heart", "star", "shield-check", "camera")',
            condition: (_, siblingData) => siblingData?.mediaType === 'icon',
          },
        },
        {
          name: 'iconPosition',
          type: 'select',
          defaultValue: 'top',
          label: 'Icon-Position',
          options: [
            { label: 'Oben', value: 'top' },
            { label: 'Links', value: 'left' },
          ],
          admin: {
            condition: (_, siblingData) => siblingData?.mediaType === 'icon',
          },
        },
        {
          name: 'title',
          type: 'text',
          required: true,
          label: 'Titel',
          localized: true,
        },
        {
          name: 'description',
          type: 'textarea',
          label: 'Beschreibung',
          localized: true,
        },
        {
          name: 'link',
          type: 'text',
          label: 'Link',
        },
        {
          name: 'linkText',
          type: 'text',
          defaultValue: 'mehr',
          label: 'Link-Text',
          localized: true,
        },
      ],
    },
    {
      name: 'columns',
      type: 'select',
      defaultValue: '3',
      label: 'Spalten',
      options: [
        { label: '2 Spalten', value: '2' },
        { label: '3 Spalten', value: '3' },
        { label: '4 Spalten', value: '4' },
      ],
    },
  ],
}
