import { DfBaseConfig } from '@allianz/taly-core/dynamic-form';

/**
 * The value to use for the `type` attribute of headline
 * formfield configs.
 */
export const DfHeadlineTypeName = 'HEADLINE';

export const HeaderType = {
  h1: 'h1',
  h2: 'h2',
  h3: 'h3',
  h4: 'h4',
  h5: 'h5',
  h6: 'h6'
} as const;
export type HeaderType = (typeof HeaderType)[keyof typeof HeaderType];

export type HeaderOption =
  | 'page'
  | 'page-bold-caps'
  | 'section'
  | 'subsection-large'
  | 'subsection-medium'
  | 'subsection-small'
  | 'subsection-xsmall';

export interface DfHeadlineConfig extends DfBaseConfig {
  /**
   * Specifies the type of the field as `HEADLINE`.
   */
  type: typeof DfHeadlineTypeName;

  /**
   * This field's label.
   * It's translatable by default and supports string interpolation.
   * @examples ["My label", "My label {$['bb-pgr-simple'].person.firstName}"]
   */
  label: string;

  /**
   * The headlineType
   */
  headerType: HeaderType;

  /**
   * The nxHeadline option. This determines the visuals.
   */
  headerOption: HeaderOption;

  /**
   * Property to add css classes via configuration
   * @examples ["nx-font-weight-bold nx-margin-bottom-s"]
   */
  cssClasses?: string;
}