import { Block } from 'payload'

export const BannerBlock: Block = {
  slug: 'banner',
  labels: {
    singular: {
      de: 'Banner',
    },
    plural: {
      de: 'Banner',
    },
  },
  fields: [
    {
      name: 'textLine1',
      type: 'text',
      label: {
        de: 'Textzeile 1',
      },
    },
    {
      name: 'textLine2',
      type: 'text',
      label: {
        de: 'Textzeile 2',
      },
    },
    {
      name: 'textLine3',
      type: 'text',
      label: {
        de: 'Textzeile 3',
      },
    },
    {
      name: 'backgroundColor',
      type: 'text',
      label: {
        de: 'Hintergrundfarbe',
      },
    },
    {
      name: 'backgroundImage',
      type: 'upload',
      relationTo: 'media',
      label: {
        de: 'Hintergrundbild',
      },
    },
    {
      name: 'backgroundPosition',
      type: 'select',
      label: {
        de: 'Hintergrundposition',
      },
      defaultValue: 'center center',
      options: [
        { label: 'Mitte', value: 'center center' },
        { label: 'Oben Mitte', value: 'top center' },
        { label: 'Unten Mitte', value: 'bottom center' },
        { label: 'Links Mitte', value: 'center left' },
        { label: 'Rechts Mitte', value: 'center right' },
        { label: 'Oben Links', value: 'top left' },
        { label: 'Oben Rechts', value: 'top right' },
        { label: 'Unten Links', value: 'bottom left' },
        { label: 'Unten Rechts', value: 'bottom right' },
      ],
    },
    {
      name: 'backgroundSize',
      type: 'select',
      label: {
        de: 'Hintergrundgröße',
      },
      defaultValue: 'cover',
      options: [
        { label: 'Abdecken (cover)', value: 'cover' },
        { label: 'Einpassen (contain)', value: 'contain' },
        { label: 'Automatisch (auto)', value: 'auto' },
      ],
    },
  ],
}
