import type { Block } from 'payload'

export const HeroBlock: Block = {
  slug: 'hero-block',
  labels: {
    singular: 'Hero',
    plural: 'Heroes',
  },
  fields: [
    {
      name: 'backgroundImage',
      type: 'upload',
      relationTo: 'media',
      label: 'Hintergrundbild',
    },
    {
      name: 'headline',
      type: 'text',
      required: true,
      label: 'Überschrift',
      localized: true,
    },
    {
      name: 'subline',
      type: 'textarea',
      label: 'Unterüberschrift',
      localized: true,
    },
    {
      name: 'alignment',
      type: 'select',
      defaultValue: 'center',
      label: 'Ausrichtung',
      options: [
        { label: 'Links', value: 'left' },
        { label: 'Zentriert', value: 'center' },
        { label: 'Rechts', value: 'right' },
      ],
    },
    {
      name: 'overlay',
      type: 'checkbox',
      defaultValue: true,
      label: 'Dunkles Overlay',
    },
    {
      name: 'cta',
      type: 'group',
      label: 'Call-to-Action',
      fields: [
        {
          name: 'text',
          type: 'text',
          label: 'Button-Text',
          localized: true,
        },
        {
          name: 'link',
          type: 'text',
          label: 'Link',
        },
        {
          name: 'style',
          type: 'select',
          defaultValue: 'primary',
          label: 'Button-Stil',
          options: [
            { label: 'Primär', value: 'primary' },
            { label: 'Sekundär', value: 'secondary' },
            { label: 'Outline', value: 'outline' },
          ],
        },
      ],
    },
  ],
}
