import type { Block } from 'payload';

import { icons } from '../fields/Icons'

const FeaturesBlock: Block = {
  slug: 'features',
  imageURL: '/admin/blocks/feature-sections.png',
  labels: {
    singular: 'Features Block',
    plural: 'Features Blocks',
  },
  fields: [
    {
      name: 'title',
      type: 'textarea',
    },
    {
      name: 'paragraph',
      type: 'textarea',
    },
    {
      name: 'image',
      type: 'upload',
      relationTo: 'media',
    },
    {

      name: 'features',
      type: 'array',
      fields: [
        {
          name: 'image',
          label: 'Image',
          type: 'upload',
          relationTo: 'media',
        },
        icons(),
        {
          name: 'title',
          type: 'textarea',
          required: true,
        },
        {
          name: 'description',
          type: 'textarea',
        },
      ],
    },
    {
      name: 'type',
      type: 'select',
      admin: {
        position: 'sidebar',
      },
      options: [
        {
          label: 'Center',
          value: 'center',
        },
        {
          label: 'Small center',
          value: 'small',
        },
        {
          label: 'Left',
          value: 'left',
        },
        {
          label: 'Right',
          value: 'right',
        },
        {
          label: 'Bento',
          value: 'bento',
        },
        {
          label: 'Blog',
          value: 'blog',
        },
         {
          label: 'Multiple',
          value: 'multiple',
        },
      ],
      defaultValue: 'center',
      required: true,
    },
    {
      name: 'style',
      type: 'select',
      admin: {
        position: 'sidebar',
      },
      options: [
        {
          label: 'Light BG',
          value: 'light',
        },
        {
          label: 'Dark BG',
          value: 'dark',
        },
      ],
      defaultValue: 'light',
      required: true,
    },
  ],
};

export default FeaturesBlock;